Angularjs 实现页面遮罩层功能

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

实现效果：

1.loading指令：

"use strict"/**
* Created by yw on 2015/9/27.
* user defined loading directive
*/
angular.module('bet.loading', [])
.directive('loading', loading);function loading() {
return {
restrict: 'E',
transclude: true,
template: '<div class="divModal">'
+ '<div ng-show="loading" class="loading">'
+ '<img alt="" src="../assets/pages/img/wait-loading.gif" style="vertical-align: middle; margin-right: 7px;"/>'
+ '<b></b>'
+ '</div>'
+ '</div>',
link: function (scope, element, attr) {
scope.$watch('loading', function (val) {
if (val)
$(element).show();
else
$(element).hide();
//$(element).show();
});
}
}
}

2.页面调用：

3.模块调用：

//引用loading模块
angular.module("set", ['bet.loading']);angular
.module('bet.set')
.controller('setAppCtrl', setAppCtrl);setAppCtrl.$inject = ['$scope'];function settingAppCtrl($scope) {
$scope.loading = true;//控制遮罩层显示
$scope.loading = false;//控制遮罩层隐藏
});