查詢選擇嵌套AngularJS指令

我用兩個指令中的HTML代碼：查詢選擇嵌套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

來源

2017-09-26 panagulis72

您不應該嘗試使用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

來源

2017-09-26 11:56:50 georgeawg

這似乎是一個很好的解決方案！但是如果在「動畫」指令中寫入一個函數，我怎麼能在「animatBtn」指令中觸發它？我的意思是，在你的代碼中，在「.....其他代碼....」的第一行中，我怎樣才能調用寫在「動畫」指令中的函數？ – panagulis72

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

超級，非常感謝你！ – panagulis72

查詢選擇嵌套AngularJS指令

回答

相關問題