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

你应该避免在角度之外使用jQuery。但是，AngularJS有一个包装器：angular.element('jquery selector here');并且链接函数的element参数已经是一个jquery [lite]元素，与指令匹配的元素。

首先，拥有指定颜色的指令是过度的。如果这不是一个简化的示例，您可能需要重新考虑它。其次，你走在正确的轨道上。您需要使用$compile服务来使角度知道新指令。

在awesome的链接功能中，您可以向DOM添加元素。你知道它会触发一个指令，角度不会。你编译它，现在有角度知道。 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项目就是一个例子

将动态创建的元素添加到Directive的范围

1 个答案: