Ladda UI无法在bootstrap模式下工作

Question

使用Laddaui在模态对话框中加载指示器时遇到问题 好像我在页面上使用LADDA ui然后它工作正常。

<button type="button" data-ui-ladda="login.loading"
                        class="button-black2 segoe-ui-light ladda-button" data-style="expand-right"
                         ng-click="authenticate()">
                        <span class="ladda-label">LOGIN</span>
                    </button>

它工作正常。 但如果我在角度ui模态对话框中使用

 $modal.open({
            template: '<div><button type="button" data-ui-ladda="loading"  class="button-black2 segoe-ui-light ladda-button" data-style="expand-right"    ng-click="ok()">     <span class="ladda-label">Button</span>   </button> </div>',
            controller: function ($scope, $modalInstance) {

                $scope.ok = function () {
                    $scope.loading = true;

                }
            },

它不起作用。 旋转器旋转，但我认为半径不会被设置。任何人都知道为什么会这样？我该如何解决？

任何帮助将不胜感激 此致

Plunker ：http://plnkr.co/edit/HnIiqGMf8RPg47PNPslq?p=preview

Answer 1

您只需在模态ladda按钮中添加data-spinner-size属性即可。请参阅以下内容：

$modal.open({
            template: '<div><button type="button" data-ui-ladda="loading"  class="button-black2 segoe-ui-light ladda-button" data-style="expand-right" data-spinner-size="35"   ng-click="ok()">     <span class="ladda-label">Button</span>   </button> </div>',
            controller: function ($scope, $modalInstance) {

                $scope.ok = function () {
                    $scope.loading = true;

                }
            },

Answer 2

你遇到的问题是Ladda在显示之前计算按钮的高度，这导致半径为0。要解决此问题，您只需将链接函数指令内容包装在$timeout。

中

使用大多数需要可视化计算的第三方指令时，您需要执行此操作。它确保在执行任何相关逻辑之前，所执行的元素确实已呈现并可见。

例如，现在这将是你的指令（来自plunk）：

mymodule.directive('uiLadda', ['$timeout', function ($timeout) {
    return {
        link: function postLink(scope, element, attrs) {
            $timeout(function(){
                var Ladda = window.Ladda, ladda = Ladda.create(element[0]);
                scope.$watch(attrs.uiLadda, function(newVal, oldVal){
                    if (angular.isNumber(oldVal)) {
                        if (angular.isNumber(newVal)) {
                            ladda.setProgress(newVal);
                        } else {
                            newVal && ladda.setProgress(0) || ladda.stop();
                        }
                    } else {
                        newVal && ladda.start() || ladda.stop();
                    }
                });
            }, 0);
        }
    };
}]);