Я пытаюсь создать многоразовую директиву кнопки, которая имеет состояние «загрузки». То есть при щелчке он отключается и показывает встроенное изображение для обозначения загрузки, которое затем удаляется по завершении. Я делаю это, устанавливая переменную области действия в методе щелчка и сбрасывая ее, что изменяет состояние кнопки.
Я хочу, чтобы метод, который он вызывает при нажатии, находился в родительской области, и я также хочу, чтобы он подключался к проверке родительской области, поэтому он отключается, когда родительская форма недействительна. Это те части, с которыми мне трудно работать - я знаю, что мои проблемы связаны с объемом, но я застрял.
<loading-button class="login" data-ng-click="login()" text="Login" toggle="loaded"></loading-button>
Я надеялся сделать что-то вроде ниже, но как я могу связать метод щелчка, объявленный в экземпляре директивы, чтобы он действительно вызывался из директивы? Или это плохая практика? В настоящее время это не работает.
angular.module("App.directives").directive("loadingButton", function () {
return {
restrict: "E",
replace: true,
transclude: true,
template: '<button data-ng-click="{{ngClick}}">{{text}}<img class="loading" src="images/ButtonLoader.gif" alt=""></button>',
scope: {
"toggle": "=",
"text": "=",
"ng-disabled": "=",
"disabled": "=",
"ngClick": "&"
},
link: function(scope, element, attributes) {
scope.text = attributes.text;
var expression = attributes.toggle;
scope.$watch(expression, function(newValue, oldValue) {
if(newValue === oldValue) {
return;
}
if(newValue) {
element.removeAttr("disabled");
element.find("img.loading").hide();
}
else {
element.attr("disabled", "disabled");
element.find("img.loading").show();
}
});
}
};
});
Используется так в родительской области:
$scope.login = function () {
$scope.loaded = false; // Disable button and show it loading
// Do login stuff
$scope.loaded = true; // Enable button and hide it loading
}
Изменить:
Вот скрипка
"@". Также см. мой ответ для ng-click. Я бы не стал использовать имя «ng-click» в качестве атрибута. Обновленная скрипта 11.07.2013