角度指令绑定功能与＆amp;不将参数传递给控制器​​

Question

我有一个与Box file picker交互的指令。我的指令由2个独立的控制器使用，可能在将来增加更多。

Box文件选择器允许您在用户选择文件/文件夹后设置回调函数，如下所示：

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

我的控制器正在使用该指令，它们将成功的回调逻辑作为范围变量，我将其传递给指令。

我创建了一个plunkr，我嘲笑Box选择行为

控制器

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

指令

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();
        });

      }
    };
  });

查看

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

回调函数在控制器内调用但参数  未定义。

我能够通过使用＆＃39; =＆＃39;来解决这个问题。而不是＆＃39;＆＃39;但我想知道它为什么不与＆＃39;＆amp;＆＃39;因为它应该用于method binding

Answer 1

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

但是在你的指令中，当你调用绑定方法时，函数参数应该是一个对象，其中键是你在控制器中声明的相同参数，当你定义你的函数时。

因此，在您的指令中，您必须替换：

scope.success(message);

by：

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

然后在您的HTML中，您必须替换：

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

by：

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

您可以看到Working Plunker