angularjs - Deep directives design in Angular -

angularjs - Deep directives design in Angular -

i know isolated scope , read resources angular. stuck problem: suppose have deep directives:

a wraps b wraps c wraps d wraps e x wraps y wraps d wraps e

a, b, c, d, e, x, y directives. d , e need info of passed isolated scopes, phone call info info: '='. info belongs or x. if need utilize info in d , e, have pass in paths: a -> b -> c -> d -> e or x -> y -> d -> e. means b, c or y have create isolated scopes hold info value. deep! if in future, add together directives in middle of paths, have same thing above. don't think it's design.

any body can give me suggestions resolve design problem in angular?

ok. could:

1 - maintain info within service , inject wherever need.

2 - allow directives communicate each other via controller. example, if want directive e info form directive a, must have controller , kind of getter method, directive e require controller , utilize method within link function. easier visualize code.

.directive('adir', function () { homecoming { restrict: 'e', transclude: true, template: '<p>adir: {{info}}<span ng-transclude></span></p>', scope: { info: '=' }, controller: function ($scope) { this.getinfo = function () { homecoming $scope.info; }; }, link: function (scope, elm, attrs) { } }; }) .directive('edir', function () { homecoming { restrict: 'e', template: '<p>edir: {{info}}</p>', require: '^adir', scope: { }, link: function (scope, elm, attrs, adircontroller) { scope.$watch(function () { homecoming adircontroller.getinfo(); }, function (newval, oldval) { scope.info = newval; }); } }; });

here jsbin.

here have more info directive's require attribute.

angularjs design-patterns design angularjs-directive angularjs-scope