[AngularJS] Directive using another directive by 'require'
Directive can use another directive though ‘require‘ keyword.
angular.module(‘docsTabsExample‘, []) .directive(‘myTabs‘, function() { return { restrict: ‘E‘, transclude: true, scope: {}, controller: function($scope) { var panes = $scope.panes = []; $scope.select = function(pane) { angular.forEach(panes, function(pane) { pane.selected = false; }); pane.selected = true; }; this.addPane = function(pane) { if (panes.length === 0) { $scope.select(pane); } panes.push(pane); }; }, templateUrl: ‘my-tabs.html‘ }; }) .directive(‘myPane‘, function() { return { require: ‘^myTabs‘, restrict: ‘E‘, transclude: true, scope: { title: ‘@‘ }, link: function(scope, element, attrs, tabsCtrl) { tabsCtrl.addPane(scope); }, templateUrl: ‘my-pane.html‘ }; });
The myPane
directive has a require
option with value ^myTabs
. When a directive uses this option, $compile
will throw an error unless the specified controller is found. The ^
prefix means that this directive searches for the controller on its parents (without the ^
prefix, the directive would look for the controller on just its own element).
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。