javascript - How to get nested directives work in AngularJS -
i learning angular js bit , came across http://www.jvandemo.com/the-nitty-gritty-of-compile-and-link-functions-inside-angularjs-directives/. trying implement similar , have directives defined follows (message1, message2 , message3 have same code):
<pre> var app = angular.module('app', []); app.controller('msg', ['$scope', function($scope){ $scope.a = 5; }]); app.directive('message1', function($interpolate){ return{ template: '<div> = {{a}} </div>', compile: function(telement, tattributes){ console.log(tattributes.text + " -in compile.."); return { pre: function(scope, ielement, iattributes, controller){ console.log(iattributes.text + " -in pre.."); }, post: function(scope, ielement, iattributes, controller){ console.log(iattributes.text + " -in post.."); } } }, controller: function($scope, $element, $attrs){ console.log($attrs.text + " -in controller.."); }, } }); app.directive('message2', function($interpolate){ return{ template: '<div> = {{a}} </div>', compile: function(telement, tattributes){ console.log(tattributes.text + " -in compile.."); return { pre: function(scope, ielement, iattributes, controller){ console.log(iattributes.text + " -in pre.."); }, post: function(scope, ielement, iattributes, controller){ console.log(iattributes.text + " -in post.."); } } }, controller: function($scope, $element, $attrs){ console.log($attrs.text + " -in controller.."); }, } }); app.directive('message3', function($interpolate){ return{ template: '<div> = {{a}} </div>', compile: function(telement, tattributes){ console.log(tattributes.text + " -in compile.."); return { pre: function(scope, ielement, iattributes, controller){ console.log(iattributes.text + " -in pre.."); }, post: function(scope, ielement, iattributes, controller){ console.log(iattributes.text + " -in post.."); } } }, controller: function($scope, $element, $attrs){ console.log($attrs.text + " -in controller.."); }, } }); </pre> my html follows:
<body ng-app="app"> <div ng-controller="msg"> <div message1 text="first"> <div message2 text="..second"> <div message3 text="....third"> </div> </div> </div> </div> </body> console gives following output: [![enter image description here][1]][1] see following: <pre> first -in compile.. ..second -in compile.. ....third -in compile.. first -in controller.. first -in pre.. ..second -in controller.. ..second -in pre.. ....third -in controller.. ....third -in pre.. ....third -in post.. ..second -in post.. first -in post.. </pre> [1]: http://i.stack.imgur.com/hgapa.png
Comments
Post a Comment