请考虑以下指令：
(Live Demo)
app.directive('spinner',function() {
return {
restrict: 'A',scope: {
spinner: '=',doIt: "&doIt"
},link: function(scope,element,attrs) {
var spinnerButton = angular.element("<button class='btn disabled'><i class='icon-refresh icon-spin'></i> Doing...</button>");
element.after(spinnerButton);
scope.$watch('spinner',function(showSpinner) {
spinnerButton.toggle(showSpinner);
element.toggle(!showSpinner);
});
}
};
});
这是这样使用的：
<button ng-click="doIt()" spinner="spinIt">Spin It</button>
当spinner的值(即本例中$scope.spinIt的值)为true时,应隐藏元素并改为显示spinnerButton.当spinner的值为false时,该元素应该是可见的,并且应该隐藏spinnerButton.
这里的问题是doIt()不在隔离范围内,因此不会在单击时调用.
实施该指令的“Angular方式”是什么？
我的建议是看看这些纺纱厂发生了什么.
Be a little more API focused.
相关部分如下.我们使用常规回调来指示我们何时完成,因此微调器知道重置按钮的状态.
function SpinDemoCtrl($scope,$timeout,$q) {
$scope.spinIt = false;
$scope.longCycle = function(complete) {
$timeout(function() {
complete();
},3000);
};
$scope.shortCycle = function(complete) {
$timeout(function() {
complete();
},1000);
};
}
app.directive('spinnerClick',scope: {
spinnerClick: "=",},attrs) {
var spinnerButton = angular.element("<button class='btn disabled'><i class='icon-refresh icon-spin'></i> Doing...</button>").hide();
element.after(spinnerButton);
element.click(function() {
spinnerButton.show();
element.hide();
scope.spinnerClick(function() {
spinnerButton.hide();
element.show();
});
});
}
};
});
使用Angular风格的异步操作可以更好地工作,并通过在履行承诺时重置微调器来消除回调函数.
