angularjs : 지시문 내부에서 UI가 업데이트되지 않습니다.

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" (템플릿)을 시도해보십시오.

그런 식으로 컨트롤러의 스피너 플래그가 양방향 바인딩을 통해 업데이트되고 지시문이 해당 템플릿에서 사용할 수 있습니다.