块 UI 模式不起作用

我正在尝试逐个元素地将块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>

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

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

Parash Gami的帖子为我指明了正确的方向。实际上，我最终编写了一个包装块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">

请检查示例代码。只需包含一个 CSS 和一个 JS 的 blockUI 并添加依赖 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>

相关内容

最新更新

热门标签：