AngularJs ng-click not working directive

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");
            }
        }
    }
}])

You should use an anchor with an `ngclick` and wrap your image instead. — Wayne Ellery, May 23 '15 at 01:11
this SO post might be of help: [accessing-ng-click-in-custom-directive](http://stackoverflow.com/questions/24363217/angularjs-accessing-ng-click-in-custom-directive) — Shehryar Abbasi, May 23 '15 at 01:39
hey quick questions, are there any errors in the console? secondly, this extra comma `},` at the end of the `first directive's controller:` isn't causing any issues right? thirdly, can you check to see if it reaches the `second directive's controller:` function by placing a `console.log` just above `$scope.test`, lastly, would you need to `restrict: EA` for the `second directive`? — Shehryar Abbasi, May 23 '15 at 02:31
No i have any error. For extra comma }, it's me, i have forgot to delete it when i have pushed my code on stackOverflow. In my code i have a link below.When i place console.log above $scope.test it's work — Negrier Aurelien, May 23 '15 at 12:27

score 0 · Accepted Answer · answered May 23 '15 at 10:22

0

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>',

answered May 23 '15 at 10:22

Raulucco

3,406
1
21
27

projectdescription is my controllerAs. It's not empty, this part of the code work there isn't no problem. My problem is in my second directive, my controller is call but the scope is empty and don't contain the function scope.test – Negrier Aurelien May 23 '15 at 12:38
Have a look at the plunker that I created. the test function is triggered when clicking in the image – Raulucco May 23 '15 at 14:06
on your plunker the link of your image is not valid. And even if i change the url of the src image and that i click on the image nothing is happening http://plnkr.co/edit/EGcWke3v33sVFORUrb4o?p=preview – Negrier Aurelien May 23 '15 at 14:22
I thought you wanted to trigger the test function. As you said that ngclick doesn't work – Raulucco May 23 '15 at 15:13
Yes i want to trigger the test function when i click on the image – Negrier Aurelien May 23 '15 at 15:38
on your example you have a console.log inside the test function. If you click on one image with the console open then you can see the message appears, thus the test function triggers – Raulucco May 23 '15 at 17:00
I have found the problem ! ... It's because in my css i have z-index:-2 and so ng-click doesn't work – Negrier Aurelien May 23 '15 at 18:25

AngularJs ng-click not working directive

1 Answers1