javascript - Passing method through a directive to a parent directive -


edit: modified code per stevuu's suggestion added plunkr here

i'm attempting have child directive call method(resolve) through directive way parent directive i'm having difficulties identifying problem approach.

the problem right seems although resolve() called expected on click, selected remains undefined.

the html:

<!doctype html> <html> <head>   <meta http-equiv="content-type" content="text/html; charset=utf-8">   <title>angular: directive using &amp; - jsfiddle demo</title>        <script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>   <link rel="stylesheet" type="text/css" href="/css/normalize.css">   <link rel="stylesheet" type="text/css" href="/css/result-light.css">   <script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>   <style type='text/css'>           </style>  </head> <body ng-app="myapp">   <div grand-parent>     <span>selected: {{text}}</span>     <div parent resolve="resolve"></div> </div> </body> </html> 

and js:

var myapp = angular.module('myapp',[]);  myapp.directive('grandparent', function() { return {     scope:{         resolve: "&"     },     link: function($scope, $element) {         $scope.resolve = function(selected){             $scope.text = selected             }         }     }; });  myapp.directive('parent', function(){     return{         scope: {             resolve: "&"         },         template: "<div child resolve='resolve'></div>"     }; });  myapp.directive('child', function() {     return {         scope: {             resolve: "&"         },         template: "<div>click me!</div>",         link: function($scope, $element) {             $element.on("click", function(){                 $scope.$apply(function(){                     $scope.resolve({selected: "yahoo!!"});                 });             });         }     }; }); 

resolve: "&" mapping. here:

myapp.directive('grandparent', function() { return {     scope:{         resolve: "&"     },     link: function($scope, $element) {         $scope.resolve = function(selected){             $scope.text = selected             }         }     }; }); 

you trying map "resolve" ... nothing, because "grandparent" doesn't have attr named "resolve".

if want share staff betweens directives should that:

view

<div data-grand-parent resolve="resolved()">     <div data-parent  ></div> </div> 

directives

var app = angular.module('test');  app.directive('grandparent', function() {     return {         scope : {             resolve : "&" // in view defined resolve attr                           // "resolve()" value, resolve=resolved()                           // in grandparent scope too.         },         controller: function($scope){             this.getresolve = function(){                 return $scope.resolve;             };         }     }; });  app.directive('parent', function() {     return {          require: "^grandparent",          link: function(scope, element, attr, grandparentctrl){             grandparentctrl.getresolve()();         },         template : ""     }; }); 

controller

angular.module('desktop')   .controller('mainctrl', function ($scope, mocks) {      $scope.resolved = function(){         console.log("calling $scope.resolved() ...");     };    }); 

output

calling $scope.resolved() ... 

so, how work? defined resolved function in our controller, sign function attr "resolve" in grandparent directive. thx resolve : "&" mapped resolved() function "resolve" property in grandparent scope. @ end inject grandparent other directives. that's all.

i recommend read angularjs brad green, shyam seshadri. it's not best book worse , it's free. can find tutorial on http://www.egghead.io/

ps. sorry english ;/


Comments

Popular posts from this blog

java - activate/deactivate sonar maven plugin by profile? -

python - TypeError: can only concatenate tuple (not "float") to tuple -

java - What is the difference between String. and String.this. ? -