변수가 값을 업데이트하지 않는 것 같습니다.

Question

간단한 Angular 앱이있어서 사람이 이미지를 클릭하면로드 메시지가 표시되고 이미지가로드되면 숨 깁니다.

scope.loading = false;을 제거하면 메시지가 표시되지만 이미지를로드하는 데 5 초 이상 걸리는 경우에도 메시지가 표시되지 않습니다.

누구든지 잘못된 것을 볼 수 있습니까?

app.controller('ProductsCtrl', function($scope, $interval) { 
    $scope.images = LayerData['images']; 
    $scope.mainImage = '/open/img/'+$scope.images[0].section+'/'+$scope.images[0].file; 
    $scope.loading = true; 
    $scope.main = function(img) { 
     $scope.mainImage = '/open/img/'+img.section+'/'+img.file; 
    } 
}); 

app.directive('imageonload', function($timeout) { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
      element.bind('load', function() { 
       scope.$apply(function() { 
        scope.loading = false; 
       }); 
      }); 

      scope.$watch(function() { return scope.mainImage; }, function (newValue) { 
       if (newValue) { 
        scope.loading = true; 
        element.attr('src', scope.mainImage); 
       } 
      }); 

      element.attr('src', scope.mainImage); 
     } 
    }; 
}); 

는 관련 HTML은 이것이다, 그러나 당신이 필요로하는 경우/그 무엇 {리터럴을} 그래서 나머지는 나에게 이것은 멋지의 혼합물과 각도를 사용

<div class="row wrapper" ng-controller="ProductsCtrl"> 
    <div col> 
     <div row> 
      <div col> 
       <h1>{$section.title}</h1> 
      </div> 
     </div> 
    </div> 



    {literal} 
    <div col> 
     <div row> 
      <div col lg="7" md="7"> 
       <p ng-show="loading">Loading image...</p> 
       <div id="mainImage"> 
        <img ng-src="{{mainImage}}" imageonload style="max-width:100%;" /> 
       </div> 
      </div> 

      <div col lg="5" md="5"> 
       {/literal} 
       {$sidebar} 
       {literal} 
      </div> 
     </div> 
    </div> 
    <div col class="imgList"> 
     <div class="scrolls"> 
      <div class="imageDiv"> 


        <img src="/assets/media/img/{{img.section}}/thumb-100-{{img.file}}" ng-click="main(img)" ng-repeat="img in images" /> 

      </div> 
     </div> 
    </div> 
    {/literal} 
</div> 

에 알려보고 싶어 그리고 {$ ...}은 ~을위한 것입니다.

Answer 1

imageonload 지시문의 link 함수에서 각도 프레임 워크 외부에있는 브라우저 DOM 이벤트에 바인딩됩니다.

$apply을 발급하여 변수 업데이트 각도를 알려줘야합니다.

link: function(scope, element, attrs) { 
    element.bind('load', function() { 
     scope.$apply(function() { 
      scope.loading = false; 
     }); 
    }); 
} 

편집

당신은 imageonload 지시하기 전에 <img>의 src 속성을 결합하고는로드 이벤트에 바인딩합니다.

<img ng-src="{{mainImage}}" imageonload style="max-width:100%;" /> 

대신, HTML의 ng-src 선언을 제거하고로드 이벤트가 처음에 바인딩됩니다 보장 할 수있는 imageonload 지침, 내부로 설정하세요.

과 같이 : 잘하면 문제 해결해야 바인드 호출 후에 src를 설정 한 후

<img imageonload style="max-width:100%;" /> 

그리고 :

link: function(scope, element, attrs) { 

    // Bind to load event (Same code as as above) 

    // Set src attribute here *after* binding to the load event 
    element.attr('src', scope.mainImage); 
} 

Answer 2

을 나는 지시는 일을 가지고, 당신의 문제가 있음을 확신 그것은 "격리 범위"라고합니다. 즉, 지시문 내의 링크 함수 범위가 컨트롤러 범위가 아닙니다.

즉, $ scope.loading 변수가 절대로 전환되지 않는다는 것을 의미합니다. 지시어에 컨트롤러 변수를 수정할 수있는 권한을 부여해야합니다.

https://docs.angularjs.org/guide/directive 범위를 분리하고 transclude하는 부분을 확인하십시오. 속도가 향상됩니다.

더 자세히 설명하지 않으셔서 죄송합니다. 더 이상 도움이 필요하시면 의견을 보내주십시오.

는 건배 월