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

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 来选择所有在单击时必须启动某个功能的按钮。 它有效。问题是第二个指令 还包含一个“animateBtn”：

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

问题是在第一个指令中（即使我用户（document）.ready（）），选择器只返回一个元素（标题下的span），它不包括“animateBtn”第二个指令。

您可以在此处找到完整代码：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 时，上述指令会将点击处理程序和关联代码附加到每个具有类 animateBtn 的元素。

---

如果在“animations”指令中编写函数，如何在“animatBtn”指令中触发它？我的意思是，在您的代码中，在“.....其他代码....”的第一行中，我如何调用用“动画”指令编写的函数？

使用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