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 & - 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
Post a Comment