Geek Answers Handbook

Angular turn off and inherit directives

I have three directives:

aiOutter, aiMiddle and aiInner.

app.directive('aiOutter', function() { return { restrict: 'A', scope: { data: '=' }, template: '<div>Outter: {{data}}</div>', transclude: true, link: function(scope, elem, attrs) { console.log('outter recognized'); return console.log('outter data:', scope.data); } }; }).directive('aiMiddle', function() { return { restrict: 'A', scope: { data: '=' }, template: '<div>Middle: {{data}}</div>', transclude: true, link: function(scope, elem, attrs) { console.log('middle recognized'); return console.log('middle data:', scope.data); } }; }).directive('aiInner', function() { return { restrict: 'A', scope: { data: '=' }, template: '<div>Inner: {{data}}</div>', link: function(scope, elem, attrs) { console.log('inner recognized'); console.log('inner data:', scope.data); scope.changeData = function(newData) { scope.data = newData; } } }; });

My markup is as follows:

 <body ng-controller="MainCtrl"> <div ai-outter data="name"> <div ai-middle data="data"> <div ai-inner data="data"> </div> </div> </div>

Only the basic outter directive seems to be matched. What do I need to do to be able to use this inheritance pattern, and also be able to populate the internal directive with translatable markup?

Plunker: http://plnkr.co/edit/HvaJKmGH2agEOKHGrZvV

EDIT Clarification

I edited my markup a as suggested by PascalPrecht (updated plunk is here: http://plnkr.co/edit/HvaJKmGH2agEOKHGrZvV )

 <body ng-controller="MainCtrl"> <div ai-outter data="name" ng-transclude> <div ai-middle data="name" ng-transclude> <div ai-inner data="name" ng-transclude> <h1> Hello, {{name}}</h1> <button ng-click="name = 'bob'">Click me</button> </div> </div> </div>

However, I think I have a problem. When I click the button, the {{name}} model needs to be fully snapped, right? Currently, only the inner area is being updated.

I think I'm confused about directives.

+1
angularjs angularjs-directive transclusion
source share
2 answers

You cannot use a primitive value, and you must reference an object from your area controller.

See the modified version of your code: http://plnkr.co/edit/666Adad72zRJIasOzurs?p=preview

And don't forget to check out this excellent answer: What are the nuances of prototype / prototype inheritance in AngularJS?

+1
source share

You need to specify ng-transclude in your directive template to tell angular where the broadcast content can be placed. Then you could do some chaining by providing a template that receives transcoded content, where when the broadcast content again contains a directive that receives data that has two-way binding.

I updated your bar accordingly: http://plnkr.co/edit/sM3Jnj?p=preview

0
source share

More articles:


All Articles