Angular 1：嵌入的重复指令之间的通信？

Question

I faced with a problem.

I want to create tabs with separated navigation and content (each one is a separate directive), they are talking to each other using events.

So, the navigations directive is pretty easy, I didn't include this part here. But the content is much more difficult to me. I want to show only a selected tab and hide others (based on some variable in parent tabs ' scope). Each tab can contain directive/expression/plain html. I tried plenty of variants but they didn't work.

Could you please help me to find a solution?

1. How to pass a variable {{item.key}} to an attribute for ng-repeated ng-transcluded directives? Like <tab key="{{item.key}}" repeat="item in items">

2. How to access a variable selectedTabKey (that is in tabs directive) from every child tab's scope?

 var app = angular.module("app", []); var $ = angular.element; app.run(function($templateCache, $rootScope) { $rootScope.items = [ {key:1,value:'a'}, {key:2,value:'b'}, {key:3,value:'c'} ]; }); app.directive( "tabs", function() { return { restrict: "AE", scope: true, transclude: true, replace: true, template: "<div ng-transclude></div>", link: function(scope, elem, attr, ctrl) { scope.selectedTabKey = 2; // TODO: changing the selectedTabKey value // want to show/hide the related tab } }; }); app.directive( "tab", function($compile) { return { restrict: "AE", transclude: true, replace: true, template: "<div><span transclude></span></div>", link: function( scope, elem, attr, ctrl, transclude ) { var transc = $(elem[0].querySelector( "[transclude]" )); transclude( scope, function( childs ) { transc.append( childs ); }); transc.attr("ng-repeat", attr.repeat); $compile(transc)(scope); // todo: access parent's var `selectedTabKey` // and make visible the related tab } }; });

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script> <div ng-app="app"> <tabs> <!-- how to pass the attr {{item.key}} below? --> <tab key="{{item.key}}" repeat="item in items"> <!-- here some directive/expression/plain html --> {{item.value}} </tab> </tabs> </div>

Answer 1

Friend, You can't see that variable "selectedTabKey" in "tab" link because of cycle digest, you have two alternatives:

1. Put "tabs" in a pre link to run before.

   link: { pre:function(scope, elem, attr, ctrl) { scope.selectedTabKey = 2; // TODO: changing the selectedTabKey value // want to show/hide the related tab } }

OR

2. Put creation of element in next digest cycle using a $timeout

   app.directive( "tab", function($compile, $timeout) { ... link: function( scope, elem, attr, ctrl, transclude ) { ... $timeout(function(){ console.log(scope.$parent.selectedTabKey) },0) } }

Answer 2

Found a solution.

Used a require in directive's configs.

Here is an example: https://plnkr.co/edit/IGrgb5GY5legl2ncrw2d?p=preview