My problem lies in a nested directive within my code. I am attempting to pass a function from the nested directive to my controller, but for some reason, the function is not being triggered.
Here is an excerpt of my main directive HTML:
<div class="panel panel-primary">
<div class="panel-heading" ng-click="collapse()">{{user.name}}</div>
<div class="panel-body" ng-hide="collapsed">
<address></address>
<div>
<h4>Friends:</h4>
<div ng-repeat="friend in user.friends">
{{friend}}
<remove-friend method="removeFri(friend)"></remove-friend>
</div>
<div ng-show="!!user.rank">
{{user.rank}}
</div>
<button ng-show="!user.rank" class="btn btn-primary" ng-click="knightme(user)">Click Me</button>
</div>
</div>
</div>
Within the above directive, there is a remove-friend directive that includes a property called method which references a controller function removeFri().
In my directive, I reference it as follows:
.directive("removeFriend", function(){
return {
restrict: 'E',
templateUrl: "removeFriend.html",
scope : {
method: "&"
},
controller: function($scope){
$scope.remove = function(){
$scope.method();
};
}
};
});
The issue arises when $scope.method() is never called. Even attempting to use alert($scope.method()) results in undefined. Clicking on the x (remove icon) should trigger the removal of a specific item, but this functionality is not working as expected.
For more details and to see the problem in action, please visit the following plunker link: https://plnkr.co/edit/d5fStmjspGm5AMmCK9Rx?p=preview