Angularjs点击任何链接时如何屏蔽全屏

时间:2015-03-25 04:10:42

标签: javascript jquery angularjs

我正在处理 Angularjs 并且找不到任何方法来屏蔽 - 取消屏蔽我的HTML主体或div。

我尝试了 ng-show ,但在我的情况下这不起作用。

任何人都可以让我知道我如何使用anuglarjs禁用所有选项,使用masking unmasking或一些加载屏幕。

编辑:
我希望我的屏幕被禁用,直到我的http请求没有从服务器返回。在Jquery中,这可以使用掩蔽和取消屏蔽来实现

2 个答案:

答案 0 :(得分:0)

看看这个:

https://github.com/DanWahlin/CustomerManagerStandard

特别是这个文件:

的CustomerManager \应用\ wc.directives \指令\ wcOverlay.js

答案 1 :(得分:0)

可能这会有所帮助...... 您应该在http请求之前显示一些叠加层,然后在从服务器获得响应之后再隐藏该叠加层...

<div ng-app="myApp" ng-controller="customersCtrl">
    <div id="overlay"></div>
    <ul>
        <li ng-repeat="x in names">{{ x.Name + ', ' + x.Country }}</li>
    </ul>
</div>

var app = angular.module('myApp', []);
app.controller('customersCtrl', function ($scope, $http) {

    $("#overlay").show();
    $http.get("http://www.w3schools.com/website/Customers_JSON.php")
        .success(function (response) {
        $scope.names = response;
        $("#overlay").hide();
    });
});

#overlay {
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 999;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
}

这是有效的JsFiddle 希望这会有所帮助......:)