通過$ compile方法指令的共享範圍

Question

我在指令之間隔離範圍時遇到了一些麻煩。我在想，這可能與我在$scope.addCategory方法中定義的我的指令中使用$compile方法的方式有關。

這裏是我的指令：

directive('siteCategory', [ function(){ 
     return{ 
      restrict: "E", 
      replace: true, 
      templateUrl: 'site-category.html', 
      scope:{}, 
      controller: ['$scope', '$element', '$attrs', '$compile', function($scope, $element, $attrs, $compile){ 
       $scope.view = {}; 
       $scope.view.defaultCategoryName = "Name of Category"; 
       $scope.view.displayName = true; 
       $scope.data = {}; 

       $scope.removeCategory = function(){ 
        console.log('removing category', $element); 
        $element.remove(); 
       }; 
       $scope.addCategory = function(){ 
        var newCategory = angular.element(document.createElement('site-category')); 

        console.log('adding category', $element); 

        angular.element($element[0].querySelector('.category-name')).after(newCategory); 
        $compile($element)($scope); 
        $scope.$apply(); 
       }; 

       $scope.updateCategoryName = function(){ 
        console.log('editing category name', $element); 
        $scope.view.displayName = false; 
        $scope.$apply(); 
        $element[0].querySelector('.category-name > input').focus(); 
       }; 

       $scope.saveCategoryName = function(){ 

        $scope.data.categoryName = $scope.data.categoryName.trim(); 
        console.log('saving category name: ', $scope.data.categoryName); 

        if($scope.data.categoryName === ""){ 
         $scope.data.categoryName = $scope.view.defaultCategoryName; 
        } 
        $scope.view.displayName = true; 
        $scope.$apply(); 
       }; 

      }], 

      link: function(scope, element, attrs){ 

       angular.element(element[0].querySelector('.remove')).bind('click', scope.removeCategory); 
       angular.element(element[0].querySelector('.add')).bind('click', scope.addCategory); 
       angular.element(element[0].querySelector('.display-name')).bind('click', scope.updateCategoryName);    
       angular.element(element[0].querySelector('.category-name input')).bind('blur', scope.saveCategoryName); 

       // Default category name 
       scope.data.categoryName = scope.view.defaultCategoryName; 
      } 
     }; 

    }]); 

這裏是指令的模板：

<div class="category"> 
    <div class="actions"> 
     <span class="icon remove" data-icon="&#xe01e;"></span> 
     <span class="icon add" data-icon="&#xe01d;"></span> 
    </div> 
    <div class="category-name"> 
     <span ng-show="view.displayName" class="display-name">{{data.categoryName}}</span> 
     <input ng-hide="view.displayName" type='text' ng-model='data.categoryName' /> 
    </div> 
</div> 

這裏是指令的程式化的佈局：

當上點擊類別標題，我將文本更改爲輸入框：

當我向父類別添加更多「子類別」時問題開始上升。我點擊父文本和輸入框顯示父和創建的第一個子類別都：

當子類有進一步的子類別本身

同類型的行爲發生：

當點擊「添加「圖標，則相對於父級創建新的子類別。此操作發生在指令中的$scope.addCategory方法中。它改變的標記有跟隨前的$編譯方法是跑：

<div class="category"> 
    <div class="actions"> 
     <span class="icon remove" data-icon="&#xe01e;"></span> 
     <span class="icon add" data-icon="&#xe01d;"></span> 
    </div> 
    <div class="category-name"> 
     <span ng-show="view.displayName" class="display-name">{{data.categoryName}}</span> 
     <input ng-hide="view.displayName" type='text' ng-model='data.categoryName' /> 
    </div> 
    <site-category></site-category> <!-- new directive is created and will be compiled --> 
</div> 

感謝那些遙遠，都使得它這一點，所以它似乎$scope.view對象和$scope.data對象範圍正在親子關係中分享。希望每個指令都有一個獨立的範圍。半風格的代碼

的jsfiddle在這裏找到：http://jsfiddle.net/Tqxqb/1/

有什麼建議？

Answer 1

只需更換

scope: {}, 

與

範圍： '隔離'，

這裏是小提琴： http://jsfiddle.net/Tqxqb/2/