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

将$ scope对象分配到ng-model对象后。然后你就把

$scope.$apply();

这样它就能与UI元素正确绑定。

Answer 3

只有在四种情况下触发摘要周期的摘要周期问题

事件（即你的点击）， http请求，改变输入，具有回调的计时器（$ timeout等），

在点击页面上的某个位置之前，Ng模型没有显示更新的值

3 个答案: