Angularjs 使用angular.element（）插入带有angular指令的元素的正确方法

使用angular.element（）将元素插入DOM的正确方法是什么

app.directive（'validationTest'，function（）{
返回{
限制：“A”，
替换：false，
链接：函数（范围、元素、属性）{
scope.call=函数（）{
log（“有人点击了它”）；
};
var newElement=angular.element（“”）.text（'Yo'）；
元素。追加（新元素）；
}
};
});

在这段代码中，我试图在应用了指令的元素中添加一个span元素。我可以将这个span元素添加为调用append-method的父div的子元素

但是，正如您在代码中看到的，一个

ng点击

也与此跨度相关。我知道从任何角度看它都没有用，它只是为了演示。因此，正常情况下，单击此跨度，控制台中应打印一行。然而，这并没有发生

---

我错过了什么？我是否对此追加使用了错误的方法，或者我的代码中有错误？

您缺少角度编译。编译遍历DOM，查找指令并初始化它们。如果不调用compile，就不会初始化ngClick。尝试使用$compile：

app.directive('validationTest', ['$compile', function($compile){
        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);
                $compile(element)(scope);
            }
        };
    });

app.directive（'validationTest'，['$compile'，函数（$compile）{
返回{
限制：“A”，
替换：false，
链接：函数（范围、元素、属性）{
scope.call=函数（）{
log（“有人点击了它”）；
};
var newElement=angular.element（“”）.text（'Yo'）；
元素。追加（新元素）；
$compile（元素）（范围）；
}
};
});

---

有关更多信息：$compile

如果动态附加到DOM的HTML具有指令，则在将其附加到DOM之前，需要$compile并链接它：

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

var newElement=angular.element（“”）.text（'Yo'）；
$compile（新元素）（范围）；
元素。追加（新元素）；

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

app.directive（'myDirective'，function（）{
返回{
编译：函数（元素，属性）{
var newElement=angular.element（“”）.text（'Yo'）；
元素。追加（新元素）；
返回函数（范围、元素、属性）{
}
}
}
});

最好使用

templateUrl

或

template

视图

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

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