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
– Wayne Ellery, Commented May 23, 2015 at 1:11
this SO post might be of help: accessing-ng-click-in-custom-directive — Shehryar Abbasi
– Shehryar Abbasi, Commented May 23, 2015 at 1: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
– Shehryar Abbasi, Commented May 23, 2015 at 2: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
– Negrier Aurelien, Commented May 23, 2015 at 12:27

Raulucco · Accepted Answer · 2015-05-23 10:22:07Z

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, 2015 at 10:22

Raulucco

3,4261 gold badge23 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Negrier Aurelien Over a year ago

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

Raulucco Over a year ago

Have a look at the plunker that I created. the test function is triggered when clicking in the image

Negrier Aurelien Over a year ago

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 plnkr.co/edit/EGcWke3v33sVFORUrb4o?p=preview

Raulucco Over a year ago

I thought you wanted to trigger the test function. As you said that ngclick doesn't work

Negrier Aurelien Over a year ago

Yes i want to trigger the test function when i click on the image

|

Collectives™ on Stack Overflow

AngularJs ng-click not working directive

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related