jquery - 将动态创建的元素添加到指令范围

Question

我是 Angular JS 的新手，正在努力解决一个非常幼稚的问题。

我有一个指令，当添加到类 xyz 中时，它会为 DOM 元素提供蓝色背景。

我还有一个第三方 jQuery 库，它使用 xyz 类添加新元素。问题是 jQuery 库创建的新元素没有获得蓝色背景。

var test = angular.module("Test", []);
test.directive("awesome", function () {
   return {
        replace: false,
        restrict: 'C',
        transclude: false,
        link: function (scope, element, attrs) {
            $(element).css("background", "blue");
        }
    }
});


function Ctrl($scope, $http, $timeout) {

}

//Third party jQuery plugin will add a span with the class "awesome"
$(document).ready(function(){
    $(".append").append('<span class="awesome">Success</span>');
});

附加了 jsFiddle 链接。 Link

Answer 1

您应该避免在 Angular 之外使用 jQuery。然而，AngularJS 有一个包装器: angular.element('jqueryselectorhere'); 并且链接函数的 element 参数已经是一个 jquery [lite] 元素，即与指令匹配。

首先，使用指令来分配颜色是多余的。如果这不是一个简化的示例，您可能需要重新考虑它。其次，你走在正确的道路上。您需要使用 $compile 服务来让 Angular 了解新指令。

在 awesome 的链接函数中，您向 DOM 添加一个元素。你知道它会触发指令，而 Angular 不会。你编译它，现在 Angular 就知道了。 See the example live

您的awesome指令保持原样:

test.directive("awesome", function () {
return {
    replace: false,
    restrict: 'C',
    transclude: false,
    link: function (scope, element, attrs) {
        element.css("background", "blue");
    }
}
});

现在，如果任何其他指令附加可以触发新指令的元素，则可以编译它们，如下所示:

test.directive("whatever", function ($compile) {
return {
    replace: false,
    restrict: 'E',
    transclude: false,
    link: function (scope, element, attrs) {
        element.append('<span class="awesome">Awesome</span>'); 
        $compile(element.contents())(scope); // compile ONLY the contents or you'll enjoy an infinite loop in the browser.
    }
}
});

您可能需要为您提到的 jquery 库编写一个包装器。网上有一些关于将 jquery 插件与 angularjs 集成的资源。 Angular-bootstrap 项目就是一个示例