角指令绑定函数与&不传递参数给控制器

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文件选择器交互的指令。我的指令被两个独立的控制器使用，将来可能会增加更多。

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

Box file picker允许您在用户选择文件/文件夹时设置回调函数，如下所示:

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

我可以通过使用'='而不是'&'来修复这个问题，但是我想知道为什么它不能使用'&'，因为它应该用于方法绑定

1 个解决方案

#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.

是的，要将控制器函数绑定到您的指令，您必须使用& bindings(表达式绑定)，它允许指令调用由DOM属性定义的表达式或函数。

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 :

然后在HTML中，必须替换:

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

by :

由:

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

You can see the Working Plunker

你可以看到工作柱塞