javascript - 指令的共享范围通过 $compile 方法

Question

我在隔离指令之间的范围时遇到了一些麻烦。我认为这可能与我在$compile方法中定义的指令中使用$scope.addCategory方法的方式有关。

这是我的指令：

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指令中的方法中。它在运行 $compile 方法之前将标记更改为具有以下内容：

<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/