mcnull / angular-block-ui Goto Github PK

Is there any way, We can integrate angular block ui plugin in AngularJS 1.3.X

Nice work! Thanks again.

When my app loads, it replaces the contents of the body element with the app template which destroys the 'main' blockUI element. Easy to fix once I understood what was taking place. I may have missed something but I think adding a line or two to the README that describes when and why the element is appended to the body would be helpful. Other alternatives might be to delay appending the element until it's required or to eliminate appending it entirely and just document its use.

Thanks.

bower install angular-block-ui installs only the dist directory. Running the app with the uncompressed files in chrome brings up errors like this:
Failed to locate workspace file mapped to URL http://localhost/bower_components/angular-block-ui/src/angular-block-ui/angular-block-ui-header.js from source map http://localhost/bower_components/angular-block-ui/dist/angular-block-ui.js.map

Please add the code to check response in blockUIHttpInterceptor::response function, it sometimes get an empty response object and throw the TypeError exception.

or, check the blockUIConfig.autoBlock in the response function because I'm not using the autoBlock feature. :)

I know 1.3.0 is still beta, but it generates errors ($digest already in progress) and the loading screen doesn't work properly. Tested on v1.3.0-beta.15

I noticed when using the library together with ui-router, on a state where the block starts, ui-router does not update the url in the address bar.

The page is shown correctly, just the url is not updated

Removing blockUI solves the issue

Would love if you kept support for 1.2.4+, as we're using (and loving) this lib and using with 1.2.6 (yeah, yeah, we're looking into updating).

Thanks much!

Cannot simply upgrade 0.0.8 to 0.0.11. You moved your files into a dist folder, which broke all my apps.

When I switch to another controller with a scope variable populated through an ajax request using $http/$resouce, the previous location url retains and does not update to the new one. I traced the cause and it was due to this line:

$scope.$on('$locationChangeStart', function(event) {
if ($scope.state.blockCount > 0) {
event.preventDefault();
}
});

Hii,

bootstrap modal not working properly

.modal-backdrop class comes in front of modal and modal gets back making it unclickable but it can be
viewed.
also tried lowering z-index but no luck.

temporary workaround is to disable background by setting
.modal-backdrop{
z-index: 0;
}

Thank you

Hi,

In our application we currently autoBlock using BlockUI. When the user logs in to the website we send HTTP requests off for certain things relating to the authentication process, we then redirect the user to their dashboard page (#/dashboard). Because of the routeChangeStart preventDefault call (if blockCount > 0) the user isn't changed to the dashboard and problems arise. I can understand that if BlockUI was blocking the user based on them typing in a new URL, but if a controller has actioned the route change then I think it is valid for the route change to occur.

Happy to discuss. For now we will have to comment out the routeChangeStart call until we finish implementing individual blocks but ideally we don't want to have to change the blockUI code if we can help it :)

Kind regards,
Aaron

Occasionally I'd like to use HTML-formatted content (e.g. a spinner icon or a mult-line message) for the blockui message. Right now that's not possible without modifying both the template and directive code. I'd like to see the code updated to support HTML.

If I get a chance I'll include a PR with suggested changes (mainly using $sce.trustAsHtml and ng-bind-html)

The blocking div stays on after calling blockUI.stop(); I can step through the stop code in blockUI and see that the blockCount goes down to 0 and the reset(true) function is called. Going further I can see that state.blocking is set to false, but the blocking div stays on...

Reproducible at http://angular-block-ui.nullest.com/#!/examples/documentation

Any example will show the issue, as long as mouse pointer is not moved after blocking started, the icon remains to be a spinner until pointer is moved. Chrome Version 39.0.2171.95 m

Works fine in IE/FF.

When submitting, the overlay will prevent double submissions by making the submit button unaccessible, but does not block double submissions when submitted by the keyboard.

I have a controller that does a GET request in the controller method. On the
template I have a blockui element:

I put two breakpoints in the blockui js. One in the blockUi directive factory and one where it intercepts a request and checks the patterns (in the instances.locate function).
When I load the page, the controller runs and makes the GET request. The instances.locate breakpoint is hit. After that, the blockUI directive factory breakpoint gets hit. Frustratingly, the Loading... popup covers the whole screen, because the directive isn't getting processed before the request occurs. It should process the directives before it handles the requests, though.

Is there a workaround for this?

Hello,

Awesome tool...

When using ui-router with autoblocking turned on the URL is not changed in the address bar when navigating from one state to another. Everything else works fine....just the URL isn't changed.

Have I missed something?

Hi,
How can I apply blocking to single elements instead of body ?

It would be helpful to have an option to call BlockUI's start method with more parameters than just 'message'. For example, the 'delay' parameter would be useful in some special cases:

blockUI.start({delay: 0});

This way I can globally configure via blockUIConfig to "autoBlock" on $http calls with the default delay (which is appropriate most of the time)..... yet I still have the option to override these configuration values if I manually (on a per call basis) invoke the start() method.

It would be nice for this module to automatically toggle the aria-busy attribute on the element it is being block. This will let screen readers know that the area is busy and cannot be accessed

http://www.w3.org/TR/wai-aria/states_and_properties#aria-busy

I have tried blockUI in my own project and in a very simple fiddle: http://jsfiddle.net/cmjg4Lny/1/ with the same result, the overlay does not show. I've been through all the documentation, your working examples and stepped through the source code with no luck. My intent is to have blockUI intercept http requests.

Is the template not loaded? Am I missing a dependency? I'm struggling to get the simplest case working.

Thanks.

http://plnkr.co/edit/9Ng5CtoCeFlLiKNDmgZp?p=preview

angular.module('myApp', ['blockUI']);
angular.module('myApp').controller('ManualBlockingController', function($scope, blockUI, $timeout) {
$scope.startBlockWithMessage = function() {
blockUI.start("my custom message ...");
$timeout(function() {
blockUI.stop();
}, 2000);
};

$scope.startBlockWithMessage();//does not display custom message <----
});

When user click on the button, blockUI.start('my custom message') will display the custom message correctly. but when i call $scope.startBlockWithMessage() programatically, the custom message is not display.

It'd be nice if there were an option to turn off certain HTTP methods. For example, we want auto-blocking for HTTP gets on loads but not for HTTP POSTs on saves (probably similar for HTTP DELETE, PUT). We can workaround via the regular expressions in config but that requires excluding each and every POST or using the explicit service calls everywhere.

In similar fashion people also might want to change the wait text from Loading... to Saving... depending on HTTP method.

Doc shows:
blockUIConfig.autoBlock = false;

But correct usage is:
blockUIConfig.autoBlock(false);

The former won't work.

i'm happy with the autoblocking feature except for some cases where i'm showing my own loading text.

How can I not show a loading message before i do a particular request?

Hi! I want to block a table tr. This is how my code looks like.

    <table>
        <thead>
        <tr>
            <th class="col-md-6">First Name</th>
            <th class="col-md-6">Last Name</th>
        <tr ng-repeat="user in users | filter : somefilter1(query) | filter : somefilter2(categoryId)">
            <td>{{user.firstName}}</td>
            <td>{{user.lastName}}</td>
        </tr>
        </tbody>
    </table>

And some JavaScript

$scope.updateUser = function (user) {
    var myBlock = blockUI.instances.get('blockUI_user' + user.id);
    myBlock.start('Updating...');
    //do magic with user
}

The problem is the fact that I cannot block a specific row. I can add a extra tr like this but it adds an extra column.

<td block-ui="{{'blockUI_user' + user.id}}"></td>

If I add the block-ui inside a existing <td> everything inside it will not be rendered. I cannot add other types of siblings except <td>. Is it possible somehow to block the parent of the parent? Thank you.

Hii,

first thanks for this wonderfull module

im using it with my java app
and using "<%= request.getContextPath()%> in my ajax url
and i find it difficult to insert block ui pattern's regex for my ng-grid

please add an option to block without block-ui pattern

OR

Can you please help me to create a regex to accept any URL i've tried /
im not good with regex

Thank you

Was using my own blockUI service, but found this one quite nice.

I'm wondering how I could bypass the interceptor on some request. I guess I could provide some special config to the ajax call. I do some periodic checks on the background and I don't want those requests blocking the page

http://plnkr.co/edit/LRqdjvZY6ISyGeS6TFYK?p=preview

In this plunker, i create 2 local pouchdb instances. insert 200 docs in one db, and replicate it to the other.

Take a look a the console log:

after finish replicate, i call blockUI.stop() and you can see the blockUI.state().blocking change from true to false. However, the page is still block

If the connection to the website goes down the response interceptor gets and error with "cannot read property config of null". Should probably be changed to check for null as it assumes success.

Hi McNull,
I using your plug-in and i found a problem when lose my scope within the div to lock position while the information.
Therefore I apologize for my presumption but it performs the following modifications:

File: angular-block-ui.js
1- blkUI.directive('blockUi', ["blockUIConfig", "blockUiCompileFn", function (blockUIConfig,
blockUiCompileFn) {
return {
scope: blockUIConfig.hasScope,
restri...


2 -
blkUI.constant('blockUIConfig', {
templateUrl: 'angular-block-ui/angular-block-ui.ng.html',
delay: 250,
message: "Loading ...",
autoBlock: true,
hasScope: true,
resetOnExcep...

File: app.js
1 -
blockUIConfig.autoBlock = false;
blockUIConfig.autoInjectBodyBlock = false;
blockUIConfig.hasScope = false;

This is okay ?
Again apologies and greetings.

Hi,

I've got a function that block the UI then undertakes an ajax post. I'm trying to unblock the ui in the always() function but getting no luck. Anyone had a similar problem?

Hi, thank you for your project!
In the http://plnkr.co/edit/GIyC6Xp7qD2DCMKxowdt?p=preview
Static arrays - work,
Asynchronous results - does not work.
How to make it work?

Currently it says package/*/, but there is no such folder. This makes it impossible to use with main-bower-files without overrides

Hi,

this is a code snippet of my module called transactions.

angular.module('transactions').controller('TransactionsController', ['Transactions',function(Transactions){

$scope.findTransactions = function(){
$scope.transaction_type = 'payment';
$scope.status = 'Pending';
$scope.transactions = Transactions.query({
transaction_type : $scope.transaction_type,
status : $scope.status
});
$timeout(blockUI.stop,0);
};
});

the thing is i need to add $timeout(blockUI.stop,0) everytime im calling resource query method or else the blocker will not disappear.

all of my other modules is working just fine without $timeout(blockUI.stop,0); on query method call.

I'm running into a problem where the this reference https://github.com/McNull/angular-block-ui/blob/master/src/angular-block-ui/service.js#L55 is window and window doesn't have reset method. Not too sure why this particular reference is this vs self as it is referenced elsewhere, that is why I ask instead of putting up a PR.

A minor request: I'd like to see some support for things like transitions (fade in/fade out). Maybe dynamic class application.

Can some of this be done through the template, or does the angular logic to show/hide override any effects?

my exact code that calls your 0.0.1 worked great. I swapped out 0.1.1 js to 0.0.3 and suddenly code breaks with unable to inject blockui.

What changed in 0.3 from 0.1:

Thank

Auto blocking was happening during typeaheads so we added typeahead URLs to the list of exclusions in config. That stops the popup but unfortunately it steals focus away from the typeahead. I'm tracing through the blur and restore focus logic but I'm not sure what corrections need to be made there yet.

I'd like to use this directive by specifying the attribute on the container rather than adding a child element to my markup. I see that I can work around the current implementation by setting transclude to true and adding an element with the ng-transclude attribute to the template.

So instead of this:

<div id="my-container">
  <div block-ui="dataload"></div>
  <div id="my-data-table">...</div>
</div>

I do something like this:

<div id="my-container" block-ui="dataload">
  <div id="my-data-table">...</div>
</div>

I've not done any directive development, so I don't know if there are any drawbacks or significant consequences to making this modification.

This is a breaking change from how the block-ui is currently defined and I don't know if you can accommodate both styles (via an option perhaps?). I've managed to get it working, but it does break the blocking element for pages designed for the current implementation.

Hi,

Grunt bower install does not install angular-block-ui in index.html.
I ran the following commands

bower install -S angular-block-ui
# angular-block-ui added to bower.json
 grunt bowerInstall
# angular-block-ui does not get added in index.html

If I run the 2 commands above with any other library, it gets added to index.html.
I use grunt-bower-install version 1.6.0

Thank you,
Andrei

Hi

I have inherited an Angular project that uses angular-block-ui.

One of the requirements is that the app runs on IE7.

However, I am having problems getting it to work, so am trying to narrow down what is causing the issues (which are currently mainly where DOM elements that should not be displayed actually are being displayed).

So: has this project been tested with IE7?

Yeah, I know, it's a pain... but I have double-checked, and IE7 compatibility is definitely non-negotiable on this project.

many thanks

Matt

I noticed the library add a class block-ui to the body tag

.block-ui {
 position: relative;
}

which is breaking my Bootstrap 3 sticky footer http://getbootstrap.com/examples/sticky-footer-navbar/

Can I safely remove it?

Up ,down arrow key not working after second time and focus out from input after one backspace and after second backspace it moves to previous page.
I am using
angular-block-ui v0.0.12
http://angular-ui.github.io/bootstrap/ Version: 0.11.0
Bootstrap v3.1.1
AngularJS v1.2.23
jQuery JavaScript Library v1.11.1

Hello,

We're trying to use blockUIConfig in our app config but are getting an error:

Unknown provider: blockUIConfig even though we include it in our config function like so:

var myapp = angular.module('myApp', ['blockUI']);

myapp.config(function(blockUIConfig){

});

The documentation on your readme page suggests this: angular.module('myApp',).config(function(blockUIConfig) {

is the proper syntax but in this case, blockUI isn't added as a dependency to the angular app. Maybe I'm missing something?

Any help would be greatly appreciated.

Thanks!

I tried implementing angular blockUI by creating custom blocks in div tag.

Before calling the REST api I start the blockUI and once I get the response I stop blockUI.

BlockUI is stopped but I am not able to populate $scope data in html.

Is there a workaround for this?

http://plnkr.co/edit/Jr00mmCdmexgXJqvTYHk?p=preview

when i include your library, typeahead stop working: as i type into the input, and there is suggestion, the input will loss focus. but if i remove your library, it works fine:

// angular.module('plunker', ['ui.bootstrap']); --> work
angular.module('plunker', ['ui.bootstrap','blockUI']); --> not work

When a input is within of div whit block-ui, the model, not work. For example:

<div  block-ui="myBlockUI">
<input class="form-control input-lg" type="text" ng-model="myMessage"  placeholder="Mensagem">
<button type="button" ng-click="showAlert()">
</div>

and in Controller

$scope.showAlert = function(){
alert( $scope.myMessage );
}

will show undefined

Nice work! Thank you.

When a form is submitted (and blockUI is started) by entering return in an input field that has the ng-blur attribute set, an error occurs on line 245:

self._restoreFocus.blur();
Error: [$rootScope:inprog]

I'm not sure anything can be done about it but wanted to let you know. I worked around it by invoking blockUI.start() after a zero millisecond timeout.

Thanks again.