Angularjs 在ngrepeat中动态添加指令时的奇怪行为_Angularjs_Angularjs Directive_Angularjs Scope_Angularjs Ng Repeat_Angular Directive

Angularjs 在ngrepeat中动态添加指令时的奇怪行为

angularjs

Angularjs 在ngrepeat中动态添加指令时的奇怪行为,angularjs,angularjs-directive,angularjs-scope,angularjs-ng-repeat,angular-directive,Angularjs,Angularjs Directive,Angularjs Scope,Angularjs Ng Repeat,Angular Directive,我试图在ngrepeat中动态添加一个指令。请参考以下小提琴链接：代码： // Code goes here var app = angular.module('myApp',[]); // myDir Directive app.directive('myDir', function() { var controller = ['$scope','$compile', function ($scope,$compile) { $scope.names=[{id:'1',d

我试图在ngrepeat中动态添加一个指令。请参考以下小提琴链接：

代码：

// Code goes here
var app = angular.module('myApp',[]);

// myDir Directive
app.directive('myDir', function() {
    var controller = ['$scope','$compile', function ($scope,$compile) {

    $scope.names=[{id:'1',directive:'subDir1'},{id:'2',directive:'subDir2'}];

    $scope.loadDynamicDir = function(id, directive) {
      var newScope = $scope.$new(true);
      var html = $compile('<div class="' + directive + '"></div>')(newScope);
      angular.element(document.getElementById('div' + id)).append(html);
    }
  }]

  return {
    controller:controller,
    templateUrl:'myDirTemplate.html'
  }

})

// subDir1 Directive
app.directive('subDir1', function() {
  return {
    restrict:'C',
    template: 'subDir1'
  }
});

// subDir2 Directive
app.directive('subDir2', function() {
  return {
    restrict:'C',
    template: 'subDir2'
  }
});

//代码在这里
var-app=angular.module（'myApp'，[]）；
//myDir指令
app.directive（'myDir'，function（）{
变量控制器=['$scope'，'$compile'，函数（$scope，$compile）{
$scope.names=[{id:'1'，指令：'subDir1'}，{id:'2'，指令：'subDir2'}]；
$scope.loadDynamicDir=函数（id，指令）{
var newScope=$scope.$new（true）；
var html=$compile（“”）（新闻范围）；
元素（document.getElementById（'div'+id））.append（html）；
}
}]
返回{
控制器：控制器，
templateUrl:'myDirTemplate.html'
}
})
//subDir1指令
应用程序指令（'subDir1'，函数（）{
返回{
限制：'C'，
模板：“subDir1”
}
});
//subDir2指令
app.directive（'subDir2'，function（）{
返回{
限制：'C'，
模板：“subDir2”
}
});

不幸的是，每个指令添加了3次。有人能解释确切的行为吗？

很简单。添加到模板中的每个函数将至少运行两次，因为

$digest

循环运行两次-第一次是在模型更改之后，第二次是检查第一个循环是否更改了任何模型

因此，每当出现

$digest

时，函数

loadDynamicDir

都将运行，并且由于每次都附加html，因此它会创建更多节点

我在你的背包上加了一个按钮，显示你的行为


消化

添加更多，当我在子指令中使用templateUrl时，它抛出错误。Fiddle链接同样是谢谢你，你能解释一下这种行为吗？当我在子指令中使用templateUrl时，它是抛出错误的。它是一样的，无限的消化。每次编译指令时，都会触发$digest，每次$digest运行时，都会触发模板中的函数并执行另一次编译，以此类推（如果digest中没有限制）

<body ng-app="myApp">
  <my-dir></my-dir>
  <button ng-click="$digest()">do digest</button>
</body>