AngularJS 컨트롤러에서 ng-click 이벤트를 발생시킨 후 UI가 업데이트되지 않습니다.

내 컨트롤러의 기능을 실행하는 ng-click 이벤트로 버튼을 바인딩했습니다. 이것은 다시 $ http를 사용하여 일부 데이터를 가져오고 이것은 정상적으로 작동합니다. 그러나 success-callback에서 내 모델을 업데이트 할 때 UI가 업데이트되지 않습니다. 나는 $ scope를 사용하여 시도했다. $ apply와 $ scope.safe 행운없이 적용해라. UI에서 아무 일도 일어나지 않습니다. 데이터는 서비스에서 반환됩니다. 아래 코드를 참조하십시오.AngularJS 컨트롤러에서 ng-click 이벤트를 발생시킨 후 UI가 업데이트되지 않습니다.

SearchController :

'use strict'; 

searchApp.controller('SearchController',  
function SearchController($scope, searchData) { 

    $scope.query = ''; 
    $scope.isLoading = false; 
    $scope.result = null; 

    $scope.doSearch = function() { 
     $scope.isLoading = true; 

     searchData.getSearchResult($scope.query, function (result) { 
      $scope.safeApply(function() { 
       $scope.result = result; 
       console.log($scope.result); 
      }); 
     }); 
    }; 

    $scope.safeApply = function (fn) { 
     var phase = this.$root.$$phase; 
     if (phase == '$apply' || phase == '$digest') { 
      if (fn && (typeof (fn) === 'function')) { 
       fn(); 
      } 
     } else { 
      this.$apply(fn); 
     } 
    }; 
} 
);

HTML 마크 업 :

<div class="search-result" ng-controller="SearchController"> 

<input type="text" value="Enter query..." ng-model="query" /> 
    <input type="button" value="Search" ng-click="doSearch()" /> 
     <div ng-show="isLoading"> 
      Searching.... 
     </div> 

     <h2>{{ result.SearchGroups }}</h2> 

     <div class="result-box" ng-repeat="group in result.SearchGroups"> 
      <div class="head"> 
       <h2>{{ group.Name }}</h2> 
       <!--<span class="seeAll">Se alle (13)</span>--> 
      </div> 
      <div class="body"> 

      </div> 
     </div> 

    </div>

출처

2013-09-29 Kulvis

'ng-click'코드가 어디에 있습니까? –

입력 요소를 잊어 버렸습니다. 코드가 업데이트되었습니다. – Kulvis

가 $safeApply 물건을 잊어 버려요. searchData.getSearchResult이 요청할 때 $http을 사용하는 경우 $apply 또는 $safeApply으로 전화 할 필요가 없습니다. 이는 실제로 비 각도 소스에서 이벤트를 가져올 때만 필요합니다. 다른 말로하면 컨트롤러에서 $apply을 사용해야하는 경우는 거의 없습니다. 당신이 그것을하는 것을 발견하면, 당신은 왜 그 이유를 알아야합니다.

따라서 result이 처리 중이라고 가정하면 $scope.result에 할당하면됩니다. 몇 가지 질문 할 사항 :

console.log은 인쇄 할 수 있습니까? 데이터를 실제로 받고 있습니까?
result에는 SearchGroups이라는 속성이 있습니까? 대소 문자 민감도 문제
결과를 덤프하면 {{result}}에 아무 것도 표시되지 않습니까? 이 질문의 아무도 결과를 얻을 수 없을 경우

, 당신은 당신의 searchData.getSearchResult 서비스 기능을 공유 할 수 있습니까?

출처

2013-09-29 19:43:29

AngularJS 컨트롤러에서 ng-click 이벤트를 발생시킨 후 UI가 업데이트되지 않습니다.

답변

관련 문제