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();
            });
        }
    }
}

View Code

2.页面调用：

<loading></loading>

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;//控制遮罩层隐藏
});