Angular Directive bind function with & not passing arguments to controller

Question

I have a directive which interacts with Box file picker. My directive is used by 2 separate controllers, with the possibility of adding more in the future.

Box file picker lets you set a callback function once the user selects a file/folder, like this:

var boxSelect = new BoxSelect();
// Register a success callback handler
boxSelect.success(function(response) {
    console.log(response);
});

My controllers are using the directive and they have the success callback logic as scope variables, which I'm passing to the directive.

I created a plunkr where I'm mocking the Box select behavior

Controller

.controller('myController', function($scope) {
  $scope.onSuccessful = function(message) {
    alert('Success! Message: ' + message);
  };
})

Directive

angular.module('myApp', [])
  .controller('myController', function($scope) {
    $scope.onSuccessful = function(message) {
      //message is undefined here
      alert('Success! Message: ' + message);
    };
  })
  .directive('myDirective', function() {
    return {
      restrict: 'A',
      scope: {
        success: '&'
      },
      link: function(scope, element) {

        //third party allows to subscribe to success and failure functions
        function ThirdPartySelect() {

        }

        ThirdPartySelect.prototype.success = function(callback) {
          this.callback = callback;

        };

        ThirdPartySelect.prototype.fireSuccess = function() {
          this.callback({
            foo: 'bar'
          });
        };

        var myThirdPartyInstance = new ThirdPartySelect();
        myThirdPartyInstance.success(function(message) {
          //message is still defined here, but not in the controller
          scope.success(message);
        });

        element.on('click', function() {
          myThirdPartyInstance.fireSuccess();
        });

      }
    };
  });

View

<div ng-controller="myController">
  <button my-directive success="onSuccessful(arg)">Test</button>
</div>

The callback function gets called inside the controller but the arguments are undefined.

I was able to fix this by using '=' instead of '&', but I'd like to know why it wasn't working with '&' since it is supposed to be used for method binding

Answer 1

Yes, to bind a controller function to your directive, you have to use the & bindings (expression binding) which allows the directive to call an expression or a function defined by a DOM attribute.

But in your directive, when you call your binded method, the function parameter should be an object where the key are the same parameter that you declare in your controller, when you define your function.

So in your directive, you have to replace :

scope.success(message);

by :

scope.success({message:message.foo});

Then in your HTML, you have to replace :

 <button my-directive success="onSuccessful(arg)">Test</button>

by :

<button my-directive success="onSuccessful(message)">Test</button>

You can see the Working Plunker