angularjs: пользовательский интерфейс, не обновляющий внутреннюю директиву

Question

В следующей директиве я выполняю довольно длительную операцию, поэтому я хочу отображать крутящий момент загрузки за это время. Я использовал 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; 
     } 
    } 
} 
}]); 

Answer 1

Вы должны наблюдать за рамки

Попробуйте

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: Я не очень хорошо знаком с угловой себя. Надеюсь, что это работает для вас.

Answer 2

Я думаю, что ваша проблема в том, что 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" (на шаблоне).

Таким образом, флаг spinner на вашем контроллере будет обновляться через двунаправленную привязку, и ваша директива сможет использовать его в своем шаблоне.