Question

Hi there I have this “confirmable” button directive which I am working on,

The html code that will trigger the directive ‘confirmable’

      <span confirmable ng-click='users.splice($index,1)'></span>

the directive: (coffeescript)

  angular.module('buttons',[])

  .directive 'confirmable', () ->
    template: """
      <button class='btn btn-mini btn-danger'>
        Destroy
      </button>
    """
    replace: yes

So the end result I’d like to see generated with this directive is

      <button class='btn btn-mini btn-danger' ng-click='users.splice($index,1)'>
        Destroy
      </button>

So far I got it to work with a linking function inside the directive

  angular.module('buttons',[])

  .directive 'confirmable', () ->
    template: """
      <button class='btn btn-mini btn-danger'>
        Destroy
      </button>
    """
    replace: yes
    link: (scope, el, attrs) ->               <---------- linking function
      $(el).attr 'ng-click', attrs.ngClick

But I’ve gone through the directive documentation again, and found the scope property with the =, @, & operators but I am really unsure if they are what I need. Then there’s this transclude properties which I still need to understand but at the moment doesn’t seem to be helpful either. So while my linking function does the trick for now, but I thought I should ask to see if angular provides a more elegant solution.

Thanks!

Answer 1

It sounds to me like you want to call a method from a parent scope from within your directive…

I’ve put together a Plunk here

(Sorry, I like JavaScript… so here goes)

Here’s you’re parent controller.

app.controller('ParentCtrl', function($scope) {
    $scope.fooCalled = 0;
    $scope.foo = function() {
        $scope.fooCalled++;
    };
});

Then your mark up

<div ng-controller="ParentCtrl">
   Foo Called: {{fooCalled}}<br/>
   <button ng-click="foo()">Call From Parent</button><br/>
   <custom-control custom-click="foo()"></custom-control>
</div>

And your directive declaration:

app.directive('customControl', function(){
   return {
     restrict: 'E',
     scope: {
        innerFoo: '&customClick'
     },
     template: '<button ng-click="innerFoo()">Call From Control</button>'
   };
});

The bit in the scope declaration in your directive definition is what ties the parent scope function reference to your directive’s scope so it can be called on click. That’s what the & is for there.