Setting multiple templates

[abhi901abhi]

Hi,

Can we set multiple templates for block UI. For examaple , I have two divs, For one dive I will use Round Loading Symbol and for other Div I will use Bar Loading symbol. ''Can we do like this?"

[kyleguate]

Hey abhi901abhi,

I had a similar need. Basically I wanted to have a default, success, error, info, and warning templates.

While I think it would be ideal to have a way to load up multiple templates, I used the following workaround:

Define a custom template in the blockUIConfig:

blockUIConfig.template =
            '<div class="block-ui-overlay"></div>' +
            '<div class="block-ui-message-container" aria-live="assertive" aria-atomic="true">' +
            '<div class="block-ui-message data-ng-binding" data-ng-class="state.cssClasses">{{ state.message }}</div></div></div>"';`

I copied the default template and added the 'state.cssClasses' in the data-ng-class. Then to pass the css class in you specify it as a custom property on the start method:

.start({
  message: 'Save Successful',
  cssClasses: ['success', 'other-custom-class']
});

For your use case you could pass in a property called 'icon' and then add a placeholder for it in your custom template.

Does that make sense?

[RODOBTA]

Is there any way to modify the path of the blockUIConfig.templateUrl,
I want to do it with dynamic templates and send that value through blockUI.start ({templateUrl: 'path'});
So far I get the value of the route but I have not been able to make it load the template.