Why doesn't ng-click work in my directive and how do I add a toggle class?

Question

I\'ve created a directive in Angular that looks like this:

angular.module(\'msfApp\')
    .directive(\'listitem\', function () {
        return {
                    


        

Answer 1

1) Problem is the isolated scope. You cannot see the function in the controller scope. One solution is to pass the function reference to the directive:

http://plnkr.co/edit/GorcZZppa8qcIKbQAg2v?p=preview

in the directive:

scope: {
    'item': '=',
    'itemClick': '&'
}

and in the template:

2) Create another function in the directive to toggle selected state and call the controller function:

angular.module('msfApp').directive('listitem', function () {
  return {
    templateUrl: 'listitem.html',
    restrict: 'E',
    scope: {
      'item': '=',
      'itemClick': '&'
    },
    link: function(scope, iElement, iAttrs) {
      scope.selected = false;
      scope.toggleState = function(item) {
        scope.selected = !scope.selected;
        scope.itemClick(item);
      }
    }
  }
});

and toggle the class in the template: