I have a parent directive with a controller that sets a method on $scope.
Then, in the child directive, I try to require that scope method via &.
However, the ng-click inside the child directive will not fire with the parent scope function. Am I doing this wrong?
Parent directive (where method is defined)
app.directive('ParentDirective', [
'$http',
function($http) {
return {
restrict: 'AE',
template: '' +
'<div child-directive ' +
'list="list" ' +
'/>' +
'',
controller: function ($scope, $http) {
$scope.setSelected = function (selector) {
console.log('hit!', selector);
}
$scope.list = [];
},
link: function postLink(scope, element, attrs) {}
};
}
]);
Child Directive (try to call parent method on ng-click, but not working)
app.directive('childDirective', [
'$window',
function($window) {
return {
restrict: 'AE',
scope: {
setSelected: '&',
list: '=',
},
template: '' +
'<ul>' +
'<li ng-repeat="person in list" ng-click="setSelected(person)">{{person.uri}}</li>' +
'</ul>' +
'',
link: function postLink(scope, element, attrs) {
}
};
}
]);
Am I passing $scope.setSelected() incorrectly from the parent to the child directive?
EDIT: So I changed the parent template to assign the function like so: template: '' + '' + '',
this will now trigger the function, but the argument does not get passed from the child directive. How can I get the child directive to pass an argument into the parent directive function?
ParentDirective has typo should be: parentDirective
in the parentDirective template you should pass the function 'list="list" ' + 'set-selected="setSelected(person)"'
try this:
html:
<parent-directive ></parent-directive>
js:
app.directive('parentDirective', [
'$http',
function($http) {
return {
restrict: 'AE',
template: '' +
'<div child-directive ' +
'list="list" ' + 'set-selected="setSelected(person)"'+
'/>' +
'',
controller: function ($scope, $http) {
$scope.setSelected = function (selector) {
console.log('hit!', selector);
}
$scope.list = [];
},
link: function postLink(scope, element, attrs) {}
};
}
])
app.directive('childDirective', [
'$window',
function($window) {
return {
restrict: 'AE',
scope: {
setSelected: '&',
list: '=',
},
template: '' +
'<ul>' +
'<li ng-repeat="person in list" ng-click="setSelected({person:person})">{{person.uri}}</li>' +
'</ul>' +
'',
link: function postLink(scope, element, attrs) {
}
};
}
]);
working plunker: