angularjs - 使用 angular.element() 使用 Angular 指令插入元素的正确方法

Question

使用 angular.element() 将元素插入 DOM 的正确方法是什么？

app.directive('validationTest', function(){
            return {
                restrict: 'A',
                replace: false,                 
                link: function(scope, element, attrs){
                    scope.call = function(){
                        console.log('Someone clicked it');
                    };

                    var newElement = angular.element('<span ng-click="call()">').text('Yo Yo');
                    element.append(newElement);
                }
            };
        });

在此代码中，我尝试在已应用指令的元素中添加一个 span 元素。我可以将此 span 元素添加为调用追加方法的父 div 的子元素。

但是，正如您在代码中看到的，ng-click 也已与此范围关联。我知道从任何 Angular 来看它都没有用，它只是用于演示目的。因此，通常情况下，单击此跨度，控制台中应打印一行。然而，这并没有发生。

我在这里缺少什么？我是否对此附加使用了错误的方法或者我的代码中有一些错误？

Answer 1

如果动态附加到 DOM 的 HTML 有指令，那么您需要在将其附加到 DOM 之前 $compile 并链接它:

 var newElement = angular.element('<span ng-click="call()">').text('Yo Yo');
 $compile(newElement)(scope);
 element.append(newElement);

另一种不易出错的方法是将 DOM 操作移至编译函数。通过在编译阶段插入新元素，新的 HTML 将在链接阶段自动链接(无需手动编译/链接):

app.directive('myDirective', function() {
     return  {
         compile: function(element, attr) {
              var newElement = angular.element('<span ng-click="call()">').text('Yo Yo');
              element.append(newElement);
              return function(scope, element, attr) {
              }
         }
     }
});