如何在angularjs的指令中推迟方法执行 [英] how to defer a method execution in a directive in angularjs
问题描述
我正在编写一个指令,它接收一个函数作为参数,该指令执行并运行函数中包含的任何内容.
I'm writing a directive which recives a function as a parameter, the directive executes and run whatever is contained into the function.
用例是:
- 指令包含一个链接
- 当用户单击链接时,将执行作为参数(来自控制器)传递的方法
- 当用户点击点击按钮时,会显示一个微调器
- 方法执行完成后,微调器将隐藏
我的问题是如何推迟执行并将其绑定到承诺,以在方法执行后隐藏微调器.
my question is how can I defer the execution and bind it to a promise, to hide the spinner after the method execution.
出于说明目的,我使用了从 3 到 1 计数的 $timeout,请查看我迄今为止所做的代码:
for illustration purposes I have used $timeout that counts from 3 to 1, please take a look to the code I've done so far:
app.directive('toogleTextLink', function($compile,$q) {
return {
restrict: 'AE',
scope: { callback: "&targetMethod" },
template: '<div><a style="cursor: pointer" ><b>{{text}}</b></a>show value= {{show}} <br/><div ng-class="{previewLoader: show}"></div></div>',
link: function (scope, element, attr) {
scope.value = attr.value;
scope.show = false;
scope.$watch('value', function () {
if (scope.value) {
scope.text = "yes";
} else {
scope.text = "no";
}
});
element.bind('click', function () {
scope.show = true;
scope.value = !scope.value;
scope.$digest();
if (scope.callback) {
var deferred = $q.defer(scope.callback());
deferred.promise.then(function () {
scope.show = false;
console.log("then called");
});
}
});
}
};
});
app.controller('myCtrl', function($scope,$timeout,$q) {
$scope.IsFacebookConnected = false;
$scope.countDown = 3;
$scope.authSocial = function(value, socialNetwork) {
switch (socialNetwork) {
case "facebook":
$scope.IsFacebookConnected = !value;
}
runCounter = function() {
$scope.countDown -= 1;
if ( $scope.countDown > 0)
$timeout(runCounter, 1000);
console.log("timer");
};
runCounter();
};
});
这也是 plunker.
推荐答案
Andy Joslin 编写了一个承诺跟踪器",它完全符合您的需求.它甚至还有一些用于 $http 集成的糖.基本上你向它添加承诺",它会告诉你执行状态.然后,您可以将该执行状态绑定到 ng-show 上的诸如加载微调动画之类的东西.https://github.com/ajoslin/angular-promise-tracker 这是一个演示: http://plnkr.co/edit/3uAe0NdXLz1lCYlhpaMp?p=preview
Andy Joslin wrote a "promise tracker" which does exactly what you need. It even has some sugar for $http integration. Basically you add "promises" to it, and it tells you the execution state. You can then bind that execution state to ng-show on something like a loading spinner animation. https://github.com/ajoslin/angular-promise-tracker and here's a demo: http://plnkr.co/edit/3uAe0NdXLz1lCYlhpaMp?p=preview
您的代码将类似于:
$scope.tracker = promiseTracker("socialtracker");
$scope.tracker.addPromise(somePromise);
在您看来:
<div ng-show="tracker.active()">Loading...</div>
这篇关于如何在angularjs的指令中推迟方法执行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!