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);
     }
}

这是当我在选择中单击 fox 选项时，它读取数据并将其存储到 currentSeThemeOption 中。

正如您从控制台中看到的，它还打印了值

我在想 'this' 和 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

是digest cycle的问题digest cycle只在四种情况下触发

事件（即您的点击）， http请求，输入变化，带回调的计时器（$timeout 等），

Answer 3

将 $scope 对象分配给 ng-model 对象后。然后你只需输入

$scope.$apply();

以便它将与 UI 个元素正确绑定。

Ng-model 直到点击页面上的某处才显示更新后的值

Ng-model did't show updated value until click somewhere on the page

javascript

amazon-web-services

angularjs

ecmascript-6

angular-ngmodel