ng-click not working inside of directive's template

Question

I am beginner to angular custom directive. I just render two html template based on the controllers scope value using custom directive. After rendering the html ng-click="myclick()" event not working for both templates.

view.html

<div ng-controller = 'ctrl1'>
     <div class="doc-list-wrapper" ></div>
</div>
<div ng-controller = 'ctrl2'>
    <div class="doc-list-wrapper" ></div>
</div>

Template

<script type="text/ng-template" id="tmpl-doc-list-wrapper">
        <ul>
            <li ng-repeat="doc in docs" >
                <a rel="external" ng-click="myclick()" >
                    <span >{{doc.stageName}}</span>
                </a>
            </li>
        </ul>
</script>

Template Rendering

app.run(function ($templateCache) {
        $templateCache.put(
            'tmpl-doc-list-wrapper', jQuery('#tmpl-doc-list-wrapper').html());
    });

My Directive

app.directive('docListWrapper', ['$timeout', function ($timeout) {
        return {
            restrict: 'C',
            priority: 500,
            replace: true,
            templateUrl: 'tmpl-doc-list-wrapper',
            scope: { docs: '=docs'},
            link: function (scope, element, attrs) {
            }
        };
    }])

Controllers

app.controller('ctrl1', function ($scope, $interval) {
    $scope.docs = [{"doc":"http://google.com","stageName":"Project 1"},
                        {"doc":"http://google.com","stageName":"Project 2"},
                        {"doc":"http://google.com","stageName":"Project 3"},
                        {"doc":"http://google.com","stageName":"Project 4"},
                        {"doc":"http://google.com","stageName":"Project 5"},
                        {"doc":"http://google.com","stageName":"Project 6"},
                        {"doc":"http://google.com","stageName":"Project 7"},
                        {"doc":"http://google.com","stageName":"Project 8"}];
    $scope.myclick = function(){
        alert('clicked me ')
    }
});

app.controller('ctrl2', function ($scope, $interval) {
    $scope.docs = [{"doc":"http://google.com","stageName":"Unit 1"},
                        {"doc":"http://google.com","stageName":"Unit 2"},
                        {"doc":"http://google.com","stageName":"Unit 3"},
                        {"doc":"http://google.com","stageName":"Unit 4"},
                        {"doc":"http://google.com","stageName":"Unit 5"},
                        {"doc":"http://google.com","stageName":"Unit 6"},
                        {"doc":"http://google.com","stageName":"Unit 7"},
                        {"doc":"http://google.com","stageName":"Unit 8"}];
    $scope.myclick = function(){
        alert('clicked me ')
    }
});

score 3 · Accepted Answer · answered Jan 10 '17 at 07:04

3

$scope.myclick = function(){
    alert('clicked me ')
}

is in your controller, but your directive is isolate scope, so you either you need to pass myclick via scope : {myclick: "&"} or you use directive controller method to define myclick.

answered Jan 10 '17 at 07:04

Thalaivar

23,282
5
60
71

1

The right answer :) @sanman read about isolated scopes of angular for more information, to really understand angular, this is a key point... – Ron Dadon Jan 10 '17 at 07:09
@sanman: how are you passing these values to docListWrapper can you show me that... – Thalaivar Jan 10 '17 at 07:30
Read this stackoverflow, you would get better idea... check whether your directive docListWrapper is getting those two values passed from your html where you are using it... http://stackoverflow.com/questions/36455124/angular-js-directive-and-restrict-option – Thalaivar Jan 10 '17 at 07:36
@Thalaivar app.directive('docListWrapper', ['$timeout', function ($timeout) { return { restrict: 'C', priority: 500, replace: true, templateUrl: 'tmpl-doc-list-wrapper', scope: { docs: '=docs', myclick: "&"}, link: function (scope, element, attrs) { } }; }]). I tried this but not working – sanman Jan 10 '17 at 07:37
You need to pass it from here.... – Thalaivar Jan 10 '17 at 07:52
@Thalaivar : How do pass parameter value in myclick() function?. I want to pass $index value. so i wrote myclick($index) but i got undefined value when clicked. – sanman Jan 10 '17 at 10:43

score 0 · Answer 2 · answered Jan 10 '17 at 07:02

0

You need to use the injected scope to define both data and functions in your controller:

Scope.myclick = function(){
    alert('clicked me ')
}

should be

$scope.myclick = function(){
    alert('clicked me ')
}

answered Jan 10 '17 at 07:02

Ovidiu Dolha

5,335
1
21
30

score -1 · Answer 3 · edited Jan 10 '17 at 09:13

-1

Use:

onclick="angular.element(this).scope().myclick()"

edited Jan 10 '17 at 09:13

GilZ

6,418
5
30
40

answered Jan 10 '17 at 07:15

phani indra

243
1
10

`angular.element` will only work if `debugInfo` is available. It might fail in production. – GilZ Jan 10 '17 at 09:13

ng-click not working inside of directive's template

3 Answers3