javascript - angular-block-ui 不会将我的 html 作为自定义消息执行

Question

我想阻止我的 UI 并在它被阻止时显示一个微调器。

我尝试使用以下内容:

blockUI.start("<div class='dots-loader'>Minions are Working!</div>");

// some code that fetches data from server

blockUI.stop();

这里的'dots-loader'取自于:http://www.css-spinners.com提供的css

成功后，它会阻止 ui 并显示消息，但它会将我的 html 显示为文本。

有什么方法可以在 blockUI 自定义消息中实现这个微调器吗？？

Answer 1

虽然这不是自定义库文件的好解决方案，但我必须这样做才能实现加载图像而不是加载文本。因为 angular-block-ui.ng.html 只有加载.. 见下面的链接

https://github.com/McNull/angular-block-ui/blob/master/src/angular-block-ui/angular-block-ui.ng.html

这里是html

<div class="block-ui-overlay"></div>
<div class="block-ui-message-container" aria-live="assertive" aria-atomic="true">
  <div class="block-ui-message" ng-class="$_blockUiMessageClass">
 {{ state.message }}</div>
</div> 

在您的元素中打开 angular-block-ui.js 文件或 min 文件。转到文件下方并在下面找到此代码。

// Automatically generated.
// This file is already embedded in your main javascript output, there's no need to include this file
// manually in the index.html. This file is only here for your debugging pleasures.
angular.module('blockUI').run(['$templateCache', function($templateCache){
  $templateCache.put('angular-block-ui/angular-block-ui.ng.html', '<div class=\"block-ui-overlay\"></div><div class=\"block-ui-message-container\" aria-live=\"assertive\" aria-atomic=\"true\"><div class=\"block-ui-message\" ng-class=\"$_blockUiMessageClass\">{{ state.message }}</div></div>');
}]);

现在添加您的代码 <div class='dots-loader'>Minions are Working!</div> 在 {{state.message}} 之后它最终看起来像 .

 $templateCache.put('angular-block-ui/angular-block-ui.ng.html', '<div class=\"block-ui-overlay\"></div><div class=\"block-ui-message-container\" aria-live=\"assertive\" aria-atomic=\"true\"><div class=\"block-ui-message\" ng-class=\"$_blockUiMessageClass\">{{ state.message }}
<div class='dots-loader'>Minions are Working!</div></div></div>');
    }]);

然后只给一个空格文本

blockUI.start(' ');

希望您能找到更好的解决方案。谢谢