Prefix Prefix - 5 months ago 13
AngularJS Question

AngularJS - binding a function to an isolate scope via '&', not firing on ng-click

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?

Answer

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:

https://plnkr.co/edit/KUWZ9bYbhnbumFwIgcIX?p=preview