Question

我正在使用Angular，我尝试动态地向页面添加指令。我在控制器中使用$ 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）（范围）时，我收到以下错误：

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

首先，控制器中的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);
};

如何多次使用$ compile服务？

1 个答案: