Menu
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);
}
}
};
});
398
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.
78
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
