Access controller scope from directive of nested directive

Question

please see my fiddle and help me find a way to access function myAlert from nested directive "choice". A found some solutions where was shared some properties of scope like this: http://jsfiddle.net/zbD95/6/ but I need use functions and properties from scope together.

Thanks!!!

Here is duplicate of my fiddle: HTML part of fiddle:

<!doctype html> <html ng-app="plunker" > <head> <meta charset="utf-8"> <title>AngularJS Plunker</title> <link rel="stylesheet" href="style.css"> </head> <body ng-controller="MainCtrl"> <choice-tree ng-model="myTree"></choice-tree> <hr /> <!--$scope.myTree = {{myTree | json}}--> </body> </html>

JS part of fiddle:

var app = angular.module('plunker', []); function Choice(name, children) { this.name = name; this.checked = false; this.children = children || []; } var apparel = new Choice('Apparel', [ new Choice('Mens Shirts', [ new Choice('Mens Special Shirts'), ]), new Choice('Womens Shirts'), new Choice('Pants') ]); var boats = new Choice('Boats'); app.controller('MainCtrl', function($scope) { $scope.name = 'World'; $scope.myTree = [apparel, boats]; $scope.myAlert = function(ev){ alert('ad'); }; }); app.directive('choiceTree', function() { return { template: '<ul><choice ng-repeat="choice in tree"></choice></ul>', replace: true, transclude: true, restrict: 'E', scope: { tree: '=ngModel' } }; }); app.directive('choice', function($compile) { return { restrict: 'E', transclude: true, //In the template, we do the thing with the span so you can click the //text or the checkbox itself to toggle the check template: '<li>' + '<span ng-click="myAlert(choice)">' + '<input type="checkbox" ng-checked="choice.checked"> {{choice.name}} - {{name}}' + '</span>' + '</li>', link: function (scope, elm, attrs) { //Add children by $compiling and doing a new choice directive if (scope.choice.children.length > 0) { var childChoice = $compile('<choice-tree ng-model="choice.children"></choice-tree>')(scope) elm.append(childChoice); } } }; });

Mark Rajcok · Accepted Answer · 2013-01-31 18:49:28Z

Use the '&' syntax to allow your isolated scope to call a method defined on the parent scope. Also, you don't need any transclusion for these directives.

HTML:

<choice-tree ng-model="myTree" my-alert="myAlert()"></choice-tree>

Directives:

app.directive('choiceTree', function () { return { template: '<ul><choice ng-repeat="choice in tree"></choice></ul>', replace: true, //transclude: true, restrict: 'E', scope: { tree: '=ngModel', myAlert: '&' }, }; }); app.directive('choice', function ($compile) { return { restrict: 'E', //transclude: true, template: '<li>' + '<span ng-click="myAlert()">' + '<input type="checkbox" ng-checked="choice.checked"> {{choice.name}} - {{name}}' + '</span>' + '</li>', link: function (scope, elm, attrs) { //Add children by $compiling and doing a new choice directive if (scope.choice.children.length > 0) { var childChoice = $compile('<choice-tree ng-model="choice.children" my-alert="myAlert()"></choice-tree>')(scope) elm.append(childChoice); } } }; });

Fiddle.

It's what I need!!! Thank you!! Can you help me ones more, please? Existing way to send parameters from child "choice" item? Like this? <span ng-click="myAlert($event)"> I need work with item scope in myAlert function...
@David, I'm confused by your request... do you want the myAlert() function to received an $event object or some other data?
Yes I need object $event, usually when I send object $event from angular in ng-click function like a parameter. It's contains informations about actual thread of scope (using in ng-repeat). Do you understand me now Mark?
To pass the $event information to the MyAlert() function, add it to where it is called: <span ng-click="myAlert($event)"> and also add it to the function declaration: $scope.myAlert = function($event){ alert('ad'); // You should have access to the $event object now }; Hope this helps!
@SteveJ, do you have a working fiddle? I tried this (just now, and also back in March) and it does not seem to work. Besides, with the & syntax/binding, you need to use a special syntax when passing arguments (and I couldn't get that to work either).

Collectives™ on Stack Overflow

Access controller scope from directive of nested directive

1 Answer 1

9 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Related