0

在下面的指令中，我做了一个相当长的运行操作，所以我想在那段时间显示一个加载旋转。我在指令的范围内使用了 ng-show 和 isLoading 变量。然而，尽管 isLoading 设置为 true，但微调器从不显示。

我的代码有什么问题？

angular.module('shared.directives').directive("xmlVisualizer", ['$rootScope', function ($rootScope) {
return {
    restrict: 'E',
    template: '<div ng-show="isLoading" class="center span10"><i class="icon-spinner icon-6x">chargement du fichier...</i>  </div> <div class="center span10" ng-show="!isLoading"> <h4>Détail du fichier {{title}}</h4> <pre id="test" class="prettyprint"></pre></div>',
    scope: {
        model: '=',
        title: '='
    },
    link: function (scope, element, attrs) {
        if (scope.model) {
            scope.isLoading = true;

            scope.xml = vkbeautify.xml(scope.model);
            $("#test").text(scope.xml);
            $("#test").html(prettyPrintOne($("#test").html(), 'xml'));

            scope.isLoading = false;
        }
    }
}
}]);
4

2 回答 2

1

我认为您的问题实际上是isLoading在模板中不是isLoading指令内，而是在父范围内寻找它。因此，就像它一样undefined（并且保持不变undefined，因为您只更改isLoading指令内部），它始终显示该!isLoading块。

你可以尝试做

 template: '<div is-loading="isLoading" ng-show="isLoading" class="center span10"><i class="icon-spinner icon-6x">chargement du fichier...</i>  </div> <div class="center span10" ng-show="!isLoading"> <h4>Détail du fichier {{title}}</h4> <pre id="test" class="prettyprint"></pre></div>',
    scope: {
        model: '=',
        title: '=',
        isLoading: '='
    },

但我不确定它是否适用于原语。如果没有，也许尝试一个对象$scope.isLoading = {value: true};（在父范围 - 可能是控制器）和is-loading="isLoading.value"（在模板上）。

这样，控制器上的微调器标志将通过双向绑定更新，并且您的指令将能够在其模板中使用它。

于 2013-07-12T09:44:42.733 回答
0

你需要观察范围

尝试这个

    angular.module('shared.directives').directive("xmlVisualizer", ['$rootScope',        function ($rootScope) {
    return {
        restrict: 'E',
        template: '<div ng-show="isLoading" class="center span10"><i class="icon-spinner icon-6x">chargement du fichier...</i>  </div> <div class="center span10" ng-show="!isLoading"> <h4>Détail du fichier {{title}}</h4> <pre id="test" class="prettyprint"></pre></div>',
        scope: {
            model: '=',
            title: '='
        },
        link: function (scope, element, attrs) {
            scope.$watch(function(scope){return scope.model}, function(model){
                if (model) {
                    scope.isLoading = true;

                    scope.xml = vkbeautify.xml(scope.model);
                    $("#test").text(scope.xml);
                    $("#test").html(prettyPrintOne($("#test").html(), 'xml'));

                    scope.isLoading = false;
                }
            })
        }
    }
}]);

PS：我自己对角度不是很精通。希望这对你有用。

于 2013-07-12T09:25:11.323 回答