A co-worker and I were implementing McNull Angular BlockUI into a production AngularJs application and it didn’t work.
You follow the instructions, they look simple enough right?
- Install
- Add a Reference
- Inject it into your module
and.. doesn’t work.
The problem stems from the fact in a production Angular app you don’t always have ng-app on a body or html tag but on sub elements. So if you just follow the directions it doesn’t work. Granted the readme says that if you aren’t using ng-app on the body tag you need to move block-ui-“main” to a sub element where your block is located. This is really the key, though you do not get automatic blocking on all aspects of the ng-app. Just in that element.
The solution is easy. Simply put block-ui=”main” on your ng-app element.
<div ng-app="myApp" block-ui=”main”></div>We do not like blocking the nav and header/footer areas but if you want to block the whole page, also add
class="block-ui-main"to your element.
There is an option to disable auto body block,
// Disable auto body block
blockUIConfig.autoInjectBodyBlock = false;Which we also did but it didn’t matter either way it seems. Anyway, just thought I’d toss this out there for anyone searching for reasons why their blockUI doesn’t show up.
