AngularJs directive function doesn't work when declaring scope

Question

I have a directive in which I'm passing an array of data via scope. However, when I click on a button with ng-click, the function doesn't work. This is my directive:

angular.module('appModule').directive('myDirective', myDirective);
function myDirective() {
    return {
        restrict: 'A',
        scope: {
            myDirective: '=',
        },
        link: function( scope ) {
            scope.enable = function() {
                console.log( 'test' );
            }
        }
    }
}

And this is my html:

<ul my-directive="vm.myData">
    <li ng-repeat="data in vm.myData track by data.id" ng-click="enable( data.id )">{{data.name}}</li>
</ul>

When I click on the li element, nothing happens. If I remove the scope definition on the directive, then I can call the function as expected.

By looking around, I saw that by using the template inside the directive may solve the problem. But I can't use the template inside the directive because it may change depending on the location, but the expected final behavior will be the same in multiple views.

Also, I need to access the whole array inside the directive for other purposes.

How can I solve this issue?

sorry how you call your directive? ...cause my-directive looks like the name oof the isoltaed scope..not the name of the directive — federico scamuzzi
– federico scamuzzi, Commented Jan 30, 2017 at 12:39
@federicoscamuzzi I call it using my-directive, I'm just using it also to pass the data, instead of creating another attribute. But if, for example, I do it like this: my-directive data-array="vm.myData" the result is the same. I edited the question to make it clear =D — celsomtrindade
– celsomtrindade, Commented Jan 30, 2017 at 12:42
Your directive has its own scope, so if you call enable your directive's scope won't know of that — devqon
– devqon, Commented Jan 30, 2017 at 12:44

AlainIb · Accepted Answer · 2017-01-30 13:07:33Z

2

since you declared a scope in the directive you isolated the scope, you have to put an html for the directive with the ng-click

http://plnkr.co/edit/8zWou1E9v29PdJFTRMvq?p=preview

  <ul mydirective myparam="myData" >
      <li ng-repeat="data in myData track by data.id" ng-click="enable( data.id )">{{data.name}}</li>
  </ul>

this ng-click will call the function defined in parent controller not in mydirective

answered Jan 30, 2017 at 13:07

AlainIb

4,6156 gold badges42 silver badges67 bronze badges

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

Comments

Dinesh · Accepted Answer · 2017-01-30 13:08:55Z

0

Try this

angular.module('appModule').directive('myDirective', myDirective);
    function myDirective() {
        return {
            restrict: 'A',
            scope: {
                myModel: '=',
            },
            link: function( scope ) {
                scope.enable = function() {
                    console.log( 'test' );
                }
            }
        }
    }

    <ul my-directive my-model="vm.myData">
        <li ng-repeat="data in vm.myData track by data.id" ng-click="enable( data.id )">{{data.name}}</li>
    </ul>

answered Jan 30, 2017 at 13:08

Dinesh

3441 gold badge5 silver badges15 bronze badges

Collectives™ on Stack Overflow

AngularJs directive function doesn't work when declaring scope

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related