angularjs - 如何多次使用 $compile 服务？

Question

我正在使用 Angular，我尝试动态地向页面添加指令。我在 Controller 中使用 $compile 服务，如下所示:

var element1 = document.createElement('myDirective');
var element2 = document.createElement('myDirective');

$compile(element1)(scope);
$compile(element2)(scope); // error on this line

document.body.appendChild(element1);
document.body.appendChild(element2);

这对 element1 非常有用，但是当我运行 $compile(element2)(scope) 时，我收到以下错误:

TypeError: undefined is not a function
    at http://localhost/Vendor/AngularJs/angular.min.js:6564:36
    at forEach (http://localhost/Vendor/AngularJs/angular.min.js:332:20)
    at nodeLinkFn (http://localhost/Vendor/AngularJs/angular.min.js:6563:11)
    at compositeLinkFn (http://localhost/Vendor/AngularJs/angular.min.js:6086:13)
    at publicLinkFn (http://localhost/Vendor/AngularJs/angular.min.js:5982:30)
    at MyController.addElements (http://localhost/Scripts/MyController.js:26:31)

我做错了什么？

Answer 1

首先， Controller 中的 DOM 操作是不好的做法。您应该为此考虑使用 ng-show、ng-if、ng-switch 或 ng-repeat 指令。

如果您真的确定这是您想要的，请将您的 DOM 操作移至一个指令，并将您的新元素添加到链接函数中提供的元素而不是 document.body。

然后尝试在链接函数调用中使用 cloneAttachFn:

var myDirective = document.createElement('myDirective');
var linkFunction = $compile(myDirective);
linkFunction(scope, function (clone) {
  // element instead of document.body, we're in another directives link function
  element.append(clone); 
};
linkFunction(scope, function (clone) { 
  element.append(clone);
};