AngularJs ng-click无效指令

Question

When I click on my HTML img, ng-click doesn't work. I don't understand why. This error happens in masonryPictureView.html

Main page - home.html

<ng-masonry>
  <ng-picture ng-items="projectdescription.pictures"></ng-picture>
</ng-masonry>

Template of directive ngPicture - masonryPictureView.html

<ul class="grille">
 <li ng-repeat="item in ngItems">
  <img ng-click="test()" src="{{item.img}}"/>      <------ NG-CLICK
 </li>
</ul>

Directive in home.html

app.directive('ngMasonry', [function () {
    return {
        restrict: 'E',
        scope: {},
        transclude: true,
        templateUrl: "shared/masonry/masonryView.html",
        controller: function ($scope) {
            xxxxxxxxx......
        },
    }
}])

app.directive('ngPicture', ['$modal', '$log', function ($modal, $log) {
    return {
        require: "^ngMasonry",
        restrict: 'E',
        scope: {
            ngItems: '=ngItems'
        },
        templateUrl: "shared/masonry/masonryPictureView.html",
        link: function (scope, element, attrs, ngMasonryCtrl) {
            ngMasonryCtrl.setPictures(scope.ngItems);
        },
        controller: function ($scope) {
            $scope.test = function () < -- -- - function call in NG - CLICK {
                console.log("toto");
            }
        }
    }
}])

Answer 1

Where does "projectdescription.pictures" come from?, Is it an array? Could it be empty?. Look in the console for errors. I recommend you that you use your namespace instead of ng for your custom directives or attributes. I made a plunker demostrating that anytime an image is clicked the test method is fired.

It is possible that you missed the ng-transclude placeholder on the ngMasonry directive?

 template: '<div class="masonry"><ng-transclude></ng-transclude></div>',