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

@Macros answer made it work just fine for me! Here's my finished code:

Directive template file:

    
        
    
    {{item.productName}}
    
        {{variant.name}} - {{variant.listprice.amount}}
    
    {{item.variants[0].listprice.amount}} {{item.variants[0].listprice.entity}}

Directive:

angular.module('msfApp')
.directive('listitem', function () {
    return {
        templateUrl: 'assets/templates/directives/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);
          }
        }
    }
});

Directive implementation:

Function in the Controller:

$scope.toggleInBasket = function(item) {
        $scope.basket.toggle(item);

        console.log(basket.get());

    }