Question

我试图在逐个元素的基础上将block-ui实现到我们的角度应用程序中。（包含，引用和正确注入所有内容）

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

我们的$ http请求是： -

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

我们的block-ui模式是： -

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

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

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

Answer 1

请检查示例代码。只需包含一个CSS和一个块的JSUI并添加依赖块blockUI，使用blockUI.start（）方法显示加载器并使用blockUI.stop（）方法隐藏加载器。以下示例在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的帖子向我指出了正确的方向。我实际上最终编写了一个包含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没有效果

2 个答案: