Question

我正在处理遗留代码。我的页面由三个部分视图组成，一个用于页眉，一个用于页脚，一个用于内容。我的页脚中有my-directive这个元素：

<a my-directive>
    <img>
</a>

页面加载时，我的页脚与其他页脚同时渲染。但是，在标头中，我有#products_menu的内容是通过ajax加载的：

// calls a route to do some processing before returning the view
// to be rendered inside #products_menu
$('#products_menu').load(...);

#products_menu包含具有相同指令的相同元素：

<a my-directive>
    <img>
</a>

这是我的指令：

angular
    .module('module1')
        .directive('myDirective', ['$rootScope', 'ModalService', '$compile',
            function($rootScope, ModalService, $compile) {
                return {
                    restrict: 'A',
                    link: function(scope, element, attrs) {
                        console.log(element);

                        element.on('click', function(e) {...}
                     } ...

问题是当我单击页脚中的元素时会触发。但是，当我单击标题中的元素时，没有。我假设这是因为元素是动态加载的，并且在angular编译期间没有绑定属性。

我是对的，如果可以，是否有解决方法？

Answer 1

因此，仅通过使用jquery或DOM操作来转储html不会紧密地完成它的工作。您必须对此进行介绍，或者使用$compile服务更好地编译DOM。有角度的东西会自动触发该模板

$('#products_menu').load(..., function() {
   $compile($('#products_menu'))($scope);
})

我建议将jQuery与angular混合使用，最好的方法是使用ng-include指令

<div id="products_menu" ng-include="'template.html'">
</div>

属性指令不适用于ajax加载的元素？

1 个答案: