zoukankan      html  css  js  c++  java
  • 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;//控制遮罩层隐藏
    });
  • 相关阅读:
    EFCore数据库迁移命令
    EF基本操作
    EF执行存储过程
    [vue]element-ui使用
    [vue]vue-router的使用
    [vue]使用webpack打包
    [vue]插槽与自定义事件
    [vue]计算属性
    [vue]axios异步通信
    [vue]组件
  • 原文地址:https://www.cnblogs.com/ywblog/p/5039898.html
Copyright © 2011-2022 走看看