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

我是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>');
});

var test=angular.module（“test”，[]）；
test.directive（“awesome”，函数（）{
返回{
替换：false，
限制：“C”，
排除：错误，
链接：函数（范围、元素、属性）{
$（元素）.css（“背景”、“蓝色”）；
}
}
});
函数Ctrl（$scope、$http、$timeout）{
}
//第三方jQuery插件将添加一个类为“awesome”的span
$（文档）.ready（函数（）{
$（“.append”）.append（'Success'）；
});

---

JSIDLE链接已连接

应该避免在angular之外使用jQuery。然而，AngularJS有一个包装器：

angular.element（'jqueryselector here'）

和linking函数的

元素

参数已经是jquery[lite]元素，即与指令匹配的元素

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

$compile

服务来了解新指令

在

awesome

的链接函数中，向DOM添加一个元素。你知道它会触发指令，但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.
    }
}
});

test.directive（“任意”，函数（$compile）{
返回{
替换：false，
限制：'E'，
排除：错误，
链接：函数（范围、元素、属性）{
元素。append（'Awesome'）；
$compile（element.contents（））（scope）；//只编译内容，否则您将在浏览器中享受无限循环。
}
}
});

---

您可能必须为您提到的jquery库编写一个包装器。网上有一些关于将jquery插件与angularjs集成的资源。angular bootstrap项目就是一个例子，这是因为angular框架不知道动态添加的元素SYEP！我明白了！但如何让它意识到？我相信$compile是我需要使用的，但我不知道如何使用！乍一看，这里有一个设计问题，因为因为您使用的是angular js，所以不应该直接进行任何dom操作（即在指令内部之外），所以可能需要首先检查为什么要这样做上面的问题只是一个简化。我依赖jQuery插件完成更大的任务。因此，放弃直接DOM操作并不是一个真正的选项。我有同样的问题，在这里找到了答案您的答案非常有用，但我正在寻找一种解决方案，我不需要对jQuery库进行任何更改/编写包装。是的，这确实是一种简化。难道没有办法让Angular知道新创建的元素吗？我曾经遇到过类似的问题，最终我从自己的解决方案中找到了解决方案，并创建了一个Plnckr。希望这能对你有所帮助。。