angularjs ng-click function is not working in directive

Question

I am trying to bind a click function with an element template , defined in directive. Somehow it is not working for unknown reasons and not throwing any error either.

My html

<body>
    <div ng-app="mainApp">
        <div ng-controller="MyController">          
             <div id="Container" class="Container">
             <collection collection='testdata'></collection>
             </div>
        </div>              
    </div>
</body>

My JS

var mainApp = angular.module("mainApp", [])    
mainApp.directive('collection', function () {
    return {
        restrict: "E",
        replace: true,
        scope: {
            collection: '='
        },
        template: "<ul><member ng-repeat='member in collection' member='member'></member></ul>"
    }
})

mainApp.directive('member', function ($compile) {       
    //var NewImg = "<img ng-click=ShowChildren() src=../Images/Plus15.png></img>";  
    //var NewChild = "<li>"+NewImg+"<span>{{member.TagName}}</span></li>";
    //var NewChild = "<li><img id=dynamic src=../Images/Plus15.png></img><span>{{member.TagName}}</span></li>";
    var NewChild = "<li><img ng-click=ShowChildren(event) src=../Images/Plus15.png></img><span>{{member.TagName}}</span></li>";
    //var NewChild = "<li>{{member.TagName}}</li>";

    return {
        restrict: "E",
        replace: false,
        scope: {
            member: '='
        },
        template: NewChild,
        link: function (scope, element, attrs) {            
            var collectionSt = '<collection collection="member.children"></collection>';
            if (angular.isArray(scope.member.children)) {    

                element.append("<collection collection='member.children'></collection>"); 
                $compile(element.contents())(scope.$new())

                //$compile(collectionSt)(scope, function(cloned, scope)   {
                    //element.append(cloned); 
                  //});
            }
        }
    }
})

mainApp.controller('MyController', function ($scope) {
    $scope.data = [{"TagName":"MyRootNode","TagPath":">MyRootNode","children":[{"TagName":"LandXML","TagPath":">MyRootNode>ChildItems>LandXML","children":[{"TagName":"Units","TagPath":">MyRootNode>ChildItems>ChildItems[1]>Units","children":[{"TagName":"Imperial","TagPath":">MyRootNode>ChildItems>ChildItems[1]>ChildItems[1]>Imperial","children":[]},{"TagName":"Project","TagPath":">MyRootNode>ChildItems>ChildItems[1]>Project","children":[]},{"TagName":"Application","TagPath":">MyRootNode>ChildItems>ChildItems[1]>Application","children":[{"TagName":"Author","TagPath":">MyRootNode>ChildItems>ChildItems[1]>ChildItems[2]>Author","children":[]},{"TagName":"Alignments","TagPath":">MyRootNode>ChildItems>ChildItems[1]>Alignments","children":[]},{"TagName":"Roadways","TagPath":">MyRootNode>ChildItems>ChildItems[1]>Roadways","children":[{"TagName":"Roadway","TagPath":">MyRootNode>ChildItems>ChildItems[1]>ChildItems[3]>Roadway[1]","children":[]},{"TagName":"Roadway","TagPath":">MyRootNode>ChildItems>ChildItems[1]>ChildItems[3]>Roadway[2]","children":[]},{"TagName":"Roadway","TagPath":">MyRootNode>ChildItems>ChildItems[1]>ChildItems[3]>Roadway[3]","children":[]},{"TagName":"Roadway","TagPath":">MyRootNode>ChildItems>ChildItems[1]>ChildItems[3]>Roadway[4]","children":[]},{"TagName":"Roadway","TagPath":">MyRootNode>ChildItems>ChildItems[1]>ChildItems[3]>Roadway[5]","children":[]}]}]}]}]},{"TagName":"Surfaces","TagPath":">MyRootNode>ChildItems>Surfaces","children":[{"TagName":"Surface1","TagPath":">MyRootNode>ChildItems>ChildItems[2]>Surface1","children":[]},{"TagName":"Surface2","TagPath":">MyRootNode>ChildItems>ChildItems[2]>Surface2","children":[]}]}]}]     
    $scope.testdata = $scope.data[0].children       
});

function ShowChildren (event) { 
    console.log("in function ShowChildren");
    var src = ($(this).attr('src') === '../Images/Plus15.png')
         ? '../Images/Minus15.png'
         : '../Images/Plus15.png';
     $(this).attr('src', src);
    event.stopImmediatePropagation();   
}

I noticed that , function ShowChildren executes when in put this in directive but then it again gives problem in "$(this).attr('src') ". And i want it to be in separate files because i will be moving all codes to different javascript file.

Please help me to resolve this.

Ramesh Rajendran · Accepted Answer · 2017-11-16 11:25:13Z

1

use ng-click=ShowChildren($event) instead of ng-click=ShowChildren(event) and also your function should defined in the angular scope. like which is answered by @Kaustubh Khare

answered Nov 16, 2017 at 11:25

Ramesh Rajendran

38.9k49 gold badges159 silver badges241 bronze badges

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

2 Comments

usersam Over a year ago

Not working. I did both the things as you and @Kaustubh mentioned.

usersam Over a year ago

No Error in console.

Kaustubh Khare · Accepted Answer · 2017-11-16 11:30:44Z

1

Your ShowChildren() function is out of the scope of the controller. Put that function into the controller.

controller

mainApp.controller('MyController', function ($scope) {
    $scope.data = [{"TagName":"MyRootNode","TagPath":">MyRootNode","children":[{"TagName":"LandXML","TagPath":">MyRootNode>ChildItems>LandXML","children":[{"TagName":"Units","TagPath":">MyRootNode>ChildItems>ChildItems[1]>Units","children":[{"TagName":"Imperial","TagPath":">MyRootNode>ChildItems>ChildItems[1]>ChildItems[1]>Imperial","children":[]},{"TagName":"Project","TagPath":">MyRootNode>ChildItems>ChildItems[1]>Project","children":[]},{"TagName":"Application","TagPath":">MyRootNode>ChildItems>ChildItems[1]>Application","children":[{"TagName":"Author","TagPath":">MyRootNode>ChildItems>ChildItems[1]>ChildItems[2]>Author","children":[]},{"TagName":"Alignments","TagPath":">MyRootNode>ChildItems>ChildItems[1]>Alignments","children":[]},{"TagName":"Roadways","TagPath":">MyRootNode>ChildItems>ChildItems[1]>Roadways","children":[{"TagName":"Roadway","TagPath":">MyRootNode>ChildItems>ChildItems[1]>ChildItems[3]>Roadway[1]","children":[]},{"TagName":"Roadway","TagPath":">MyRootNode>ChildItems>ChildItems[1]>ChildItems[3]>Roadway[2]","children":[]},{"TagName":"Roadway","TagPath":">MyRootNode>ChildItems>ChildItems[1]>ChildItems[3]>Roadway[3]","children":[]},{"TagName":"Roadway","TagPath":">MyRootNode>ChildItems>ChildItems[1]>ChildItems[3]>Roadway[4]","children":[]},{"TagName":"Roadway","TagPath":">MyRootNode>ChildItems>ChildItems[1]>ChildItems[3]>Roadway[5]","children":[]}]}]}]}]},{"TagName":"Surfaces","TagPath":">MyRootNode>ChildItems>Surfaces","children":[{"TagName":"Surface1","TagPath":">MyRootNode>ChildItems>ChildItems[2]>Surface1","children":[]},{"TagName":"Surface2","TagPath":">MyRootNode>ChildItems>ChildItems[2]>Surface2","children":[]}]}]}]     
    $scope.testdata = $scope.data[0].children;     
    $scope.ShowChildren= function(event) { 
         console.log("in function ShowChildren");
         var src = ($(this).attr('src') === '../Images/Plus15.png')
          ? '../Images/Minus15.png'
          :  '../Images/Plus15.png';
          $(this).attr('src', src);
          event.stopImmediatePropagation();   
    }   
});

Directive

var NewChild = "<li><img ng-click=ShowChildren($event) src=../Images/Plus15.png></img><span>{{member.TagName}}</span></li>";

edited Nov 16, 2017 at 11:30

answered Nov 16, 2017 at 11:22

Kaustubh Khare

3,5203 gold badges38 silver badges51 bronze badges

3 Comments

Kaustubh Khare Over a year ago

Updated the answer as @Ramesh Rajendran told.

usersam Over a year ago

Not working @Kaustubh. I did both the things you mentioned.

Kaustubh Khare Over a year ago

Could you debug the code and check for click event?

Collectives™ on Stack Overflow

angularjs ng-click function is not working in directive

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related