block-ui-pattern 无效

Question

我正在尝试逐个元素地将 block-ui 实施到我们的 angular 应用程序中。（所有内容均已正确包含、引用和注入）

我们一直在努力实施
```
block-ui-pattern
```
没有成功。

我们的 $http 请求是：-

 $http.get('/user/123/GetUserAddress/').then(function (data) {

我们的块-ui-模式是：-

 < div block-ui block-ui-pattern="/^user\/123\/GetUserAddress$/">
{{address}}
</div>

这似乎与文档相符，但无法正常工作。我错过了一些基本的东西吗？

我们的应用程序公开了一个 isloading 标志。最初设置为 true，当 $http promise returns 时，将其设置为 false.. 我意识到它不在文档中，但是，有没有办法设置
```
< div block-ui="isloading"></div>
```

Answer 1

请检查示例代码。只包含一个CSS和一个blockUI的JS，并添加依赖blockUI，使用blockUI.start()方法显示loader，使用blockUI.stop()方法隐藏loader。以下示例在 2 秒后隐藏加载程序。根据您的要求使用它。

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <link rel="stylesheet" type="text/css" href="http://angular-block-ui.nullest.com/angular-block-ui/angular-block-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>

    <script type="text/javascript" src="http://angular-block-ui.nullest.com/angular-block-ui/angular-block-ui.js"></script>
</head>
<body ng-app="app.user">
    <div ng-controller="tempController">
    </div>
</body>
</html>

<script type="text/javascript">
    var app = angular.module('app.user',['blockUI']);
    app.controller('tempController', function(blockUI,$timeout)
    {
        blockUI.start();
        $timeout(function()
        {
            blockUI.stop();
        },2000)
    });
</script>

Answer 2

Parash Gami 的

Post 为我指明了正确的方向。我实际上最终写了一个包装 block-ui

的自定义指令

var myBlocker = angular.module('app.Angular.Directive.myBlocker ', []);

myBlocker.directive('myBlocker ', ['$compile', function ($compile) {
return {
    restrict: 'A',
    scope :{
        blockId: '@id',
        block: '=',
    },
    controller: ['$scope', 'blockUI', function ($scope, blockUI) {
        var myBlock = blockUI.instances.get($scope.blockId);

        $scope.$watch('block', function (newValue, oldValue) {
            if ($scope.block === true)
            {
                myBlock.start()
            }
            else {
                myBlock.stop()
            }
        });


    }],
    link: function link(scope, element, attrs) {
        element.attr('block-ui', scope.blockId);
        element.attr('style', 'min-height:200px;');
        element.removeAttr("my-blocker"); 
        element.removeAttr("data-my-blocker");
        $compile(element)(scope);
    }
};

}]);

这让我现在可以简单地将指令添加到元素

< div id="myId" my-blocker block="loading">

block-ui-pattern 无效

block-ui-pattern has no effect

angularjs

blockui

jquery-blockui