angular directive call to controller method with parameter

Question

I have a controller with method that gets a parameter, and I want a directive to call that method and pass the parameter.

how do I add a tag to the controller when a user clicks a tag inside the directive.

a bit of code:

app.controller('MainCtrl', function($scope) {

    $scope.chosenTags = ['clickToRemoveMe', 'if you click on tags below they should appear here'];

    $scope.jokes = [{
        id: 0,
        content: 'bla bla bla bla',
        tags: ['fat', 'blondes']
    },{
        id: 1,
        content: 'another another another ',
        tags: ['thin', 'dark']
    }];

    $scope.addTag = function(tag) {
        $scope.chosenTags.push(tag);
    },

    $scope.removeTag = function(tag) {
        removeA($scope.chosenTags, tag);
    }

});

app.directive("joke", [function () {

    return {
        restrict: 'E',
        templateUrl: 'joke.html',
        scope: {
            joke: '='
        }
    };
}]);

plunker: http://plnkr.co/edit/Vpip4mWmWeH8Lvi7I5t5?p=preview

Answer 1

You're using isolated scope, so the the ng-click="addMe(tag)" won't do anything, since the addMe function does not exist anywhere on the scope.

You have several options, but I just added the function reference and put that in the scope:

Directive:

scope: {
    joke: '=',
    addMe: '='
}

HTML:

<joke ng-repeat="joke in jokes" joke="joke" add-me="addTag"></joke>

Plunker

Also you should add a check before inserting to the chosenTags array to avoid those console errors:

$scope.addTag = function(tag) {
    if ($scope.chosenTags.indexOf(tag) === -1) {
        $scope.chosenTags.push(tag);
    }
}