如何在使用Angularjs指令时刷新树的内容？

Question

下面是使用Angularjs指令在Plunker中树视图的示例。代码

部分：

.directive('treeView', ['$compile', function($compile) { 
    return { 
    restrict: 'E', 
    scope: { 
     value: '=', 
     key: '=', 
     filter: '=', 
     idx: '=' 
    }, 
    link: function(scope, element, attrs) { 
     var value = scope.value 
     scope.curValue = scope.value; 
     console.log(scope.curValue) 

     var template = 
     '<ul>' + 
      '<li>{{key}}</li>' + 
      '<li class="inner-node" ng-repeat="(k,v) in curValue">' + 
      '<i class="collapsed" ng-show="haschildren(v)" ng-class="{\'list-plus\':!k' + "open" + '}" ng-click="k' + "open" + '=!k' + "open" + '"></i>' + 
      '<span class="" ng-click="seeAll(k)">{{k}}</span>' + 
      '</li>' + 
     '</ul>'; 
     scope.haschildren = function(obj) { 
     return !$.isEmptyObject(obj) 
     }; 
     scope.seeAll = function(key) {}; 
     element.html('').append($compile(template)(scope)); 
    } 
    }; 
}]); 

我想通过设置scope.fields新值点击切换按钮来改变树节点。

但点击后没有任何变化。 我认为这是因为我用错误的方式使用链接方法，但我不知道正确的方法。

我该怎么办？

Answer 1

问题在于，当指令第一次链接时，链接函数会执行一次。

您应该使用指令的template属性来设置模板。之后，您可以将scope.hasChildren和scope.seeAll方法放在指令的控制器中。

检查更新的plunkr。

.directive('treeView', ['$compile', function($compile) { 
    return { 
    restrict: 'E', 
    scope: { 
     value: '=', 
     key: '=', 
     filter: '=', 
     idx: '=' 
    }, 
    template: '<ul>' + 
     '<li>{{key}}</li>' + 
     '<li class="inner-node" ng-repeat="(k,v) in value">' + 
     '<i class="collapsed" ng-show="haschildren(v)" ng-class="{\'list-plus\':!k' + "open" + '}" ng-click="k' + "open" + '=!k' + "open" + '"></i>' + 
     '<span class="" ng-click="seeAll(k)">{{k}}</span>' + 
     '</li>' + 
     '</ul>', 
    link: function(scope, element, attrs) { 

    }, 
    controller: function($scope){ 
     $scope.haschildren = function(obj) { 
     return !$.isEmptyObject(obj) 
     }; 
     $scope.seeAll = function(key) {}; 

    } 
    }; 
}]);