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.页面调用：

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

});