2

我是 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 链接。关联

4

1 回答 1

1

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

首先，有一个分配颜色的指令是矫枉过正的。如果这不是一个简化的示例，您可能需要重新考虑它。其次，你在正确的轨道上。您需要使用该$compile服务从角度了解新指令。

在链接功能中，awesome您将元素添加到 DOM。你知道它会触发一个指令，而 angular 不会。你编译它，现在 Angular 知道了。现场查看示例

您的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 项目就是一个例子

于 2013-07-08T06:59:05.113 回答