Le motif de blocs-ui n'a aucun effet

-1

J'essaie d'implémenter le bloc-ui dans notre application angulaire élément par élément. (Tout est inclus, référencé et correctement injectée)Le motif de blocs-ui n'a aucun effet

Nous avons essayé de mettre en œuvre
```
block-ui-pattern 
```
sans succès.

notre demande http $ est: -

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

et notre bloc-ui-modèle est la suivante: -

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

Cela semble correspondre à la documentation, mais ne parvient pas à travailler . Est-ce que je manque quelque chose de fondamental?

Notre application expose un indicateur de chargement. d'abord mis à vrai, et quand le retour de promesse de http $, permet de supprimer ce faux .. Je me rends compte que ce n'est pas dans la documentation, mais, est-il un moyen de mettre
```
< div block-ui="isloading"></div> 
```

Source

2016-04-23 Simon

avez-vous utiliser celui-ci http://angular-block-ui.nullest.com/#!/ –

Salut, c'est le échantillon que je regardais, et incapable d'obtenir le motif ui de bloc au travail – Simon

-1

Message de Parash Gami m'a indiqué la bonne direction. En fait, je fini par écrire une directive personnalisée qui enveloppe le bloc-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); 
    } 
};

}]);

Cela me permet d'ajouter maintenant simplement la directive à un élément

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

Source

2016-04-26 07:05:10 Simon

S'il vous plaît vérifier l'échantillon code. il suffit d'inclure un css et un js de blockUI et d'ajouter blockUI de dépendance, d'utiliser la méthode blockUI.start() pour afficher loader et utiliser la méthode blockUI.stop() pour masquer loader. L'exemple suivant cache le chargeur après 2 secondes. Utilisez-le selon vos besoins. J'espère que cela vous aide.

<!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>

Source

2016-04-25 03:21:08

Merci pour la relecture. Vraiment voulu utiliser le bloc-ui-motif si .. Une chose que je viens de remarquer, c'est que le bloc-ui-modèle ne fonctionne réellement que lorsque autoblock est allumé .. ce ne peut pas être le cas? – Simon

Je ne peux pas vous comprendre. –

Le motif de blocs-ui n'a aucun effet

Répondre

Questions connexes