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

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

守则的一部分：

.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));
    }
  };
}]);

.directive（'treeView'，['$compile'，function（$compile）{
返回{
限制：'E'，
范围：{
值：'='，
键：'='，
筛选器：'='，
idx:“=”
},
链接：函数（范围、元素、属性）{
var值=scope.value
scope.curvlue=scope.value；
console.log（scope.curValue）
变量模板=
“
”+
“
{{key}
”+
“
”+
'' +
“{{k}}”+
“
”+
“
”；
scope.haschildren=函数（obj）{
return！$.isEmptyObject（obj）
};
scope.seeAll=函数（键）{}；
html（“”）.append（$compile（template）（scope））；
}
};
}]);

我想通过单击开关按钮来更改树节点，该按钮将scope.fields设置为一个新值

但点击后，一切都没有改变。 我想这是因为我用了一个错误的方法链接，但我不知道什么是正确的方法

---

我该怎么办？

问题是，当指令第一次链接时，链接函数只执行一次

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

检查更新的

.directive（'treeView'，['$compile'，function（$compile）{
返回{
限制：'E'，
范围：{
值：'='，
键：'='，
筛选器：'='，
idx:“=”
},
模板：“
”+
“
{{key}
”+
“
”+
'' +
“{{k}}”+
“
”+
“
”，
链接：函数（范围、元素、属性）{
},
控制器：功能（$scope）{
$scope.haschildren=函数（obj）{
return！$.isEmptyObject（obj）
};
$scope.seeAll=函数（键）{}；
}
};
}]);

明白了！谢谢你@Eylen！

.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) {};

    }
  };
}]);