AngularJS - Pass assignment to a directive callback

Question

I have a directive that displays an icon with a little cross. When the user clicks on this cross, a callback should be called.

Here's the code of the directive template:

<div class="item" title="{{name}}">
  <button type="button" class="close">
    <span ng-click="onDelete()">&times;</span>
  </button>
  <span class="glyphicon glyphicon-folder-open"></span>
</div>

The Javascript of the directive:

angular.module('hiStack').directive('hsItem', function() {
  return {
    restrict: 'E',
    replace: true,
    templateUrl: 'item.tpl.html',
    scope: {
      onDelete: '&',
      title: '@'
    }
  };
});

Finally, the code that uses the directive:

<hs-item on-delete="deleteGroupModal = true" title="TestTitle"></hs-item>

deleteGroupModal = true is never called when I click on the cross. If I pass a function instead like deleteGroup(), it works. How can I pass an assignment like we usually do with ng-click for example?

Thank you.

You have to create and pass function in which you will define: deleteGroupModal = true and it should work. It is not possible without declaring a function. & is used for it. — Igor Janković
– Igor Janković, Commented Aug 16, 2016 at 8:17
Isn't it possible to do like the ng-click directive like ng-click="test = true" ? — Mathieu
– Mathieu, Commented Aug 16, 2016 at 8:20
What do you mean by "like ng-model directive"? In ng-model you can only pass variable ($scope) without any condition. — Igor Janković
– Igor Janković, Commented Aug 16, 2016 at 8:21
Nope, it is not possible. & in directive expects only function. You can use @ if you need only a value if you need true or false and then create function inside your directive. — Igor Janković
– Igor Janković, Commented Aug 16, 2016 at 8:24

Drkdra · Accepted Answer · 2016-08-16 08:48:32Z

1

As Igor Janković said, it's better to pass a function than to write it directly on the attribute.

That said, it's possible to eval the expression passed on the attribute like this:

angular.module('hiStack').directive('hsItem', function() {
  return {
    restrict: 'E',
    replace: true,
    templateUrl: 'item.tpl.html',
    scope: {
      title: '@'
    },
    link: function(scope, element, attrs) {
        scope.onDelete = function() {
            // Eval the code on the parent scope because directive's scope is isolated in this case
            if (attrs.onDelete) scope.$parent.$eval(attrs.onDelete);
        }
    }
  };
});

answered Aug 16, 2016 at 8:48

Drkdra

4092 silver badges9 bronze badges

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

Collectives™ on Stack Overflow

AngularJS - Pass assignment to a directive callback

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related