Question

所以我几天都在努力解决这个问题。我有这个递归指令：

app.directive('block', ['$compile', function ($compile) {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            block: '=',
            childName: '=',
            addChild: '=',
            clicked:'=',
            allBlocks: '='
        },
        template: '<div>' +
            '<p class="blocke"> {{block.title}} </p>' +
            '<input class="childButton" ng-model="childName[block.title]" type="text"        placeholder="child name">' +
            '<button class="childButton" ng-click="addChild(block.title)" >Add child to {{block.title}} </button>' +
            '</div>',
        link: function ($scope, $element) {
            $scope.$watch("block.childBlocks",function () {
                if (angular.isArray($scope.block.childBlocks) && $scope.block.childBlocks.length > 0) {
                    if(document.getElementsByClassName("blocke").length < Object.keys($scope.allBlocks).length) {
                        $element.append('<block ng-repeat="childBlock in block.childBlocks" block="childBlock" child-name="childName" add-child="addChild" all-blocks="allBlocks"></block>');
                        $compile($element.contents()[$element.contents().length-1])($scope);
                    }
                }
            }, true); 
        }
    };
}]);

每次在＆＃34; n＆＃34;中发生修改时，该指令应该添加自身的实例。阵列。这种修改是通过这个功能完成的：

$scope.addChild = function(indexe){
    var temp = {'title':$scope.childName[indexe],'childBlocks':[]};
    $scope.allBlocks[indexe].childBlocks.push(temp);
    $scope.allBlocks[$scope.childName[indexe]]=temp;
}

我的问题是如果我保留第二个if test if(document.getElementsByClassName("blocke").length < Object.keys($scope.allBlocks).length)，那么范围似乎保持不变，所以我总是将相同的块附加到第一个块。

但是如果我删除了这个测试，那么watch函数会被触发两次，我最终会将该块和它的两个孩子一起追加两次。对我而言，这是一种奇怪的行为，但我对指令不熟悉。

我想它必须来自addChild()函数，它会修改$scope.allBlocks两次，但我无法理解为什么。

编辑：我已经尝试了2天复杂的东西，但唯一有效的解决方法是：

link: function($scope, $element) {
var i =0;
$scope.$watch("block.childBlocks",function () {
            if (angular.isArray($scope.block.childBlocks) && $scope.block.childBlocks.length > 0){
                if(i==0) {
                    $element.append('<block ng-repeat="childBlock in block.childBlocks" block="childBlock" child-name="childName" add-child="addChild" all-blocks="allBlocks"></block>');
                    $compile($element.contents()[$element.contents().length-1])($scope);
                    i++;
                }
            }
        },true); 
}

是的只是一个var ......

DOM在指令内更新了两次

0 个答案: