Подтвердить что ты не робот

Angular Функция привязки директивы с & не передает аргументы контроллеру

У меня есть директива, которая взаимодействует с Box file picker. Моя директива используется двумя отдельными контроллерами, с возможностью добавления в будущем.

Сборщик файлов в коробке позволяет вам установить функцию обратного вызова, когда пользователь выбирает файл/папку, например:

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

Мои контроллеры используют директиву, и у них есть логика обратного вызова успеха как переменные области видимости, которые я передаю в директиву.

Я создал plunkr, где я издеваюсь над тем, как ящик выбирает поведение

контроллер

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

Функция обратного вызова вызывается внутри контроллера, но аргументы   undefined.

Я смог исправить это, используя '=' вместо '&', но я хотел бы знать, почему он не работал с '&' поскольку предполагается, что он используется для привязки метода .

4b9b3361

Ответ 1

Да, чтобы связать функцию контроллера с вашей директивой, вы должны использовать привязки & (привязка выражения), которая позволяет директиве вызывать выражение или функцию, определенную атрибутом DOM.

Но в вашей директиве, когда вы вызываете свой метод binded, параметр функции должен быть объектом, где ключ является тем же параметром, который вы объявляете в контроллере, когда вы определяете свою функцию.

Итак, в вашей директиве вам нужно заменить:

scope.success(message);

:

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

Затем в вашем HTML вы должны заменить:

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

:

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

Вы можете увидеть Рабочий Plunker