创建使用Angularjs一个指令一个ajax加载微调 [英] Creating an ajax loading spinner using a directive in Angularjs
问题描述
我试图创建一个简单的加载器。下面是我迄今所做的。可能有人请看看,让我知道我要去哪里错了吗?
I'm trying to create a simple loader. Below is what I have done so far. Could someone please take a look and let me know where I'm going wrong?
它出现在CSS样式装载没有被添加样式2
。我的DOM只是表明:
It appears the CSS styles loading style-2
are not being added. my DOM just shows:
<span class=""></span>
我的指令:
angular.module('loaderModule', [
'restangular',
])
.controller('appLoaderController', ['$scope', function ($scope) {
$scope.$on('LOAD', function () {
$scope.loading = "loading style-2"
});
$scope.$on('UNLOAD', function () {
$scope.loading = ""
});
}])
.directive('spinLoader', function() {
return {
restrict: 'E',
transclude: true,
template: '<span class="{{ loading }}"></span><div ng-transclude ></div>'
};
});
HTML 的
HTML:
<spin-loader>
<div ui-view></div>
</spin-loader>
我然后只调用使用它: $ $范围内发出('LOAD')
推荐答案
我会利用纳克级在你的指令是这样的:
I would make use of ng-class in your directive like this:
app.directive('spinLoader', function() {
return {
restrict: 'E',
transclude: true,
template: '<div ng-class="{loading: isLoading, style2: isLoading}" ng-transclude></div>'
};
});
在您的控制器,可以再设置 $ scope.isLoading
是真还是假。
In your controller you can then set $scope.isLoading
to be true or false.
app.controller('Ctrl', function ($scope) {
var dummyLoadingVariable = false;
$scope.$on('LOAD', function () {
$scope.isLoading = true;
});
$scope.$on('UNLOAD', function () {
$scope.isLoading = false;
});
$scope.toggleLoading = function(){
dummyLoadingVariable = !dummyLoadingVariable;
if(dummyLoadingVariable){
$scope.$emit('LOAD');
} else {
$scope.$emit('UNLOAD')
}
}
});
和HTML来测试它:
And the HTML to test it:
isLoading: {{ isLoading }}
<br/>
<spin-loader>
<div ui-view>Transcluded</div>
</spin-loader>
<br/>
<button ng-click="toggleLoading()">toggleLoading()</button>
下面是与它普拉克运行: http://plnkr.co/edit/ SetecF03aY6TnQilryWt?p = preVIEW
Here's a Plunk with it running: http://plnkr.co/edit/SetecF03aY6TnQilryWt?p=preview
这篇关于创建使用Angularjs一个指令一个ajax加载微调的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!