У меня есть директива, которая взаимодействует с 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.
Я смог исправить это, используя '=' вместо '&', но я хотел бы знать, почему он не работал с '&' поскольку предполагается, что он используется для привязки метода .