2016-04-23 12 views
-1

Я пытаюсь реализовать block-ui в нашем угловом приложении на основе элемента на основе. (Все включено, ссылки и вводили правильно)block-ui-pattern не влияет

  1. Мы пытались внедрить

    block-ui-pattern 
    

    без успеха.

наш запрос $ НТТР: -

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

и наш блок-щ-картина: -

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

Это, кажется, в соответствии с документацией, но не в состоянии работать , Мне что-то не хватает?

  1. Наше приложение предоставляет флаг загрузки. Изначально установлено верно, и когда $ HTTP обещание возвращения, устанавливает это ложь .. Я понимаю, что это не в документации, однако, Есть ли способ установить

    < div block-ui="isloading"></div> 
    
+0

есть вы используете это один http://angular-block-ui.nullest.com/#!/ –

+0

Привет, это образец, на который я смотрел, и не смог получить шаблон блока ui для работы – Simon

ответ

-1

Сообщение 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"> 
1

Пожалуйста, проверьте образец код. просто включите один css и один js blockUI и добавьте блокировку dependUI, используйте метод 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> 
+0

Спасибо за повтор. На самом деле хотел использовать шаблон block-ui. Одна вещь, которую я только что заметил, заключается в том, что блок-ui-шаблон работает только тогда, когда включен автоблокировка .. это не может быть правильным? – Simon

+0

Я тебя не понимаю. –

 Смежные вопросы

  • Нет связанных вопросов^_^