查询选择嵌套AngularJS指令

问题描述：

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

的问题是，在第一个指令（即使我的用户（文件）。就绪（）），选择回报率只是一个元素（标题下的跨度），它不包含第二个指令的“animateBtn”。

在这里你可以找到的完整代码：PLNKR

您不应该尝试使用querySelector来查找其他DOM元素。如果您想在指令之间建立父子关系，可以通过它们的控制器在它们之间进行通信，并让子指令将它们绑定到的DOM元素提供给父级。 –

我添加了一个Plunker，你可以在这里找到：https://plnkr.co/edit/ZzcowjuiYO4dCtlyC22Q?p=preview – panagulis72

正如Oliver已经说过的，你在做什么是错误的。你也不应该把事件处理器放在代码中 - 这就是jQuery的方式。尝试阅读本文，可能会帮助您找出更好的angularjs概念：https://gabrieleromanato.name/introduction-to-angularjs-for-jquery-developers阅读完之后，请尝试以AngularJS方式重新创建它，也许可以尝试使用ng-为angularjs中的动画设置动画：https：//docs.angularjs.org/api/ngAnimate – pegla

答

随着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的每个元素。

如果里面写一个函数“动画”的指令，我怎么能触发它里面的“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

这似乎是一个很好的解决方案！但是如果在“动画”指令中写入一个函数，我怎么能在“animatBtn”指令中触发它？我的意思是，在你的代码中，在“.....其他代码....”的第一行中，我怎样才能调用写在“动画”指令中的函数？ – panagulis72

使用DDO的'require'属性。查看更新以回答。 – georgeawg

超级，非常感谢你！ – panagulis72

查询选择嵌套AngularJS指令

相关推荐