Question

我在此HTML代码中使用了两个指令：

<div animations>
   <h2>Title</h2>
   <span class="animateBtn">Animate!</span>

   <info-section></info-section>
</div>

第一个是属性指令：

angular.module('app').directive('animations', ['$window', ($window: any) => {
    return {
       restrict: "A",
       link: function ($scope: any, element: any, attrs: any) {
        angular.element(document).ready(() => {
            let animateBtns = angular.element(element[0].querySelector('.animateBtn'));
            if (animateBtns && animateBtns.length) {
                for (let i = 0, animateBtnsLength = animateBtns.length; i < animateBtnsLength; i++) {
                    let currentBtn = animateBtns[i];
                    currentBtn.addEventListener("click", function () {
                        .... other code....
                    });
                }
            }

              ..... other code .....

        });
       }
   };
}])

因此，它只是一个querySelector来选择所有按钮，在点击时，必须启动某个功能。它有效。问题是第二个指令还包含一个＆＃34; animateBtn＆＃34;：

.directive('infoSection', function() {
   return {
       replace: true,
       restrict: 'E',
       template: '<div><span class="animateBtn">Animate with this too</span></div>'
   }
});

问题在于，在第一个指令中（即使我是user（document）.ready（）），选择器只返回一个元素（标题下的span），并且它不包含＆＃ 34; animateBtn＆＃34;第二条指令。

您可以在此处找到完整代码：PLNKR

Answer 1

使用AngularJS，可以使用指令将代码附加到元素而不是查询选择器：

app.directive("animateBtn", function($window) {
    return {
        restrict: 'C',
        link: postLink
    };
    function postLink (scope, elem, attrs) {
        elem.on('click', function() {

             .... other code....

        });

          .... other code....

    }
})

当AngularJS框架将元素添加到DOM时，上面的指令会将click处理程序和相关代码附加到具有类animateBtn的每个元素。

如果在内部写一个函数＆＃34;动画＆＃34;指令，如何在＃34; animatBtn＆＃34;内部触发它？指示？我的意思是，在你的代码中，在＆＃34; .....其他代码的第一行内......＆＃34;如何调用用＃34;动画＆＃34;写的函数？指令？

使用DDO的require属性访问animations指令的控制器：

app.directive("animateBtn", function($window) {
    return {
        restrict: 'C',
        link: postLink,
        require: '^animations'
    };
    function postLink (scope, elem, attrs, animations) {
        elem.on('click', function() {

             .... other code....

        });

        //call animations API

        animations.someMethod(args);

    }
})

在animations指令中：

app.directive("animations", function() {
    return {
        controller: ctrl
    }
    function ctrl($element, $scope) {
        this.someMethod = function(args) {
            //code here
        };
    }
})

有关详细信息，请参阅AngularJS Comprehensive Directive API Reference - require

嵌套AngularJS指令中的查询选择器

1 个答案: