Ng-model은 페이지 어딘가를 클릭 할 때까지 업데이트 된 값을 표시하지 않았습니다.

Question

내가 원하는 것은 내 컨트롤러에 정의 된 변수 인 ngModel의 값을 표시하는 것입니다. 그러나 페이지의 다른 곳을 클릭하거나 업데이트 버튼을 다시 클릭하기 전까지는 값이 올바른 값으로 변경되지 않았습니다. 콘솔에서 올바른 값으로 변경 되더라도.

내 themeLayout.html

<div class="theme-body" ng-controller="ThemeController as theme"> 
    <select ng-model="theme.selectedTheme" ng-change="theme.getThemeDetails(theme.selectedTheme)"> 
    <option ng-repeat="option in theme.themePacks">{{option.title}}</option> 
    </select> 
    <div class="form-group"> 
    <label for="appLogo">App Logo</label> 
    <div> 
     <img ng-src="{{theme.currentThemeImageUrl}}" alt="Description" /> 
    </div> 
    <input type="text" class="form-control" id="appLogo" ng-model="theme.currentThemeImageUrl"> 
    </div> 
</div> 

파일 그리고 이것이 내가 선택에서 여우 옵션을 클릭 할 때 이것은 내 테마 컨트롤러

export default class ThemeController { 
     constructor($log, ApiService, $scope, $state, $window) { 
     'ngInject'; 
     this.s3 = new this.AWS.S3(); 
     this.selectedTheme = ''; 
     this.currentThemeId = ''; 
     this.currentS3ThemeOption = {}; 
     this.currentS3ThemeOptionToUpload = {}; 
     this.currentThemeImageUrl = ''; 
     } 
     getThemeDetails(theme) { 
     this.$log.log(`get theme details function been called`, theme); 
     const obj = this; 
     for(let item of this.themePacks) { 
      if (theme === item.title) { 
      this.currentThemeId = item.themeId; 
      } 
     } 
     this.s3.getObject({ 
     Bucket: `improd-image-pipeline`, 
     Key: `remoteUX/qa/${obj.currentThemeId}.json`, 
     }, (err, data) => { 
      if (err) { 
      obj.$log.log(err); 
      } else { 
      obj.currentS3ThemeOption = JSON.parse(data.Body); 
      obj.currentS3ThemeOptionToUpload = obj.currentS3ThemeOption; 
      for (const prop in obj.currentS3ThemeOption.colors) { 
       obj[prop] = obj.getColors(obj.currentS3ThemeOption.colors[prop]); 
      } 
      obj.currentThemeImageUrl = obj.currentS3ThemeOption.layout.titleImageUrl; 
      obj.$log.log(`We should have upadted theme opion now`, obj.currentS3ThemeOption, obj.currentThemeImageUrl); 
      } 
    }); 
     this.$log.log(obj.currentS3ThemeOption, this.currentS3ThemeOption); 
    } 
} 

입니다, 그것은으로 데이터와 stroe 읽어 currentSeThemeOption.

는 콘솔에서 볼 수 있듯이, 그것은 또한 값

의 인쇄 내가 thingking하고하는 것은 그 수있는 '이'와 OBJ 문제를 일으키는 것입니다.

그가 제안한대로 $ scope.apply() 함수를 추가 한 후에도 문제가 해결되지 않았습니다.

Answer 1

가 scope.$apply() 전화 내부 모델을 업데이트 :

getThemeDetails(theme) { 
    this.$log.log(`get theme details function been called`, theme); 
    const obj = this; 
    for(let item of this.themePacks) { 
    if (theme === item.title) { 
     this.currentThemeId = item.themeId; 
    } 
    } 
    this.s3.getObject({ 
    Bucket: `improd-image-pipeline`, 
    Key: `remoteUX/qa/${obj.currentThemeId}.json`, 
    }, (err, data) => 
    scope.$apply(() => { 
    if (err) { 
     obj.$log.log(err); 
    } else { 
     obj.currentS3ThemeOption = JSON.parse(data.Body); 
     obj.currentS3ThemeOptionToUpload = obj.currentS3ThemeOption; 
     for (const prop in obj.currentS3ThemeOption.colors) { 
     obj[prop] = obj.getColors(obj.currentS3ThemeOption.colors[prop]); 
     } 
     obj.currentThemeImageUrl = obj.currentS3ThemeOption.layout.titleImageUrl; 
     obj.$log.log(`We should have upadted theme opion now`, obj.currentS3ThemeOption, obj.currentThemeImageUrl); 
    } 
    }) 
); 
    this.$log.log(obj.currentS3ThemeOption, this.currentS3ThemeOption); 
} 

Answer 2

그것은주기에서만 네 가지 조건

이벤트

트리거의 다이제스트주기를 소화의 문제 (즉, 사용자의 클릭)의, HTTP 요청, 입력 변경, 콜백 ($ 타임 아웃 등)이있는 타이머,

Answer 3

ng-model 객체에 $ scope 객체를 할당했으면.

$scope.$apply(); 

이렇게하면 UI 요소와 올바르게 바인딩됩니다.