OnsenUI、Angular 并在警告对话框后刷新 UI 组件

Question

我正在使用 Monaca、OnsenUI 和 Angular 开发移动应用程序。在一个页面中，我有一个可点击项目的列表；当用户点击一个条目时，应该会出现一个对话框来输入一个值。该值应显示在点击的列表项中。它确实有效，有点，但在我再次点击列表项之前，该值不会刷新，即使只是为了取消对话框。我希望在用户关闭对话框后立即更新显示的值。

这是一个 HTML 片段：

<ons-page>

  <ons-row style="margin-top: 10px; text-align: center;">
    <ons-col ng-controller="NewSubmissionController">
      <ons-list id="materialList" style="margin-top: 12px;">
        <ons-list-header>Pick the Materials</ons-list-header>
        <ons-list-item modifier="tappable" ng-click="doPickMaterial('ferrous')">
          Ferrous (<span ng-bind="materialCounters['ferrous']"></span>)
        </ons-list-item>
        <ons-list-item modifier="tappable" ng-click="doPickMaterial('non-ferrous')">
          Metal, non-ferrous ({{materialCounters['non-ferrous']}})
        </ons-list-item>
        <ons-list-item modifier="tappable" ng-click="doPickMaterial('plastic')">
          Plastic ({{materialCounters['plastic']}})
        </ons-list-item>
        <ons-list-item modifier="tappable" ng-click="doPickMaterial('other')">
          Other ({{materialCounters['other']}})
        </ons-list-item>
      </ons-list>
    </ons-col>
  </ons-row>

</ons-page>

这是控制器：

app.controller('NewSubmissionController', function($scope) {

  $scope.materialCounters = {
    'ferrous': 0,
    'non-ferrous': 0,
    'plastic': 0,
    'other': 0
  };

  $scope.doPickMaterial = function(matType) {
    ons.notification.prompt({
      title: 'Material: ' + matType,
      message: 'Please enter number of items',
      cancelable: true,
      animation: 'slide',
      callback: function(newCt) {
        alert('Input value: *' + newCt + '*');
        if (newCt != null) {
          if (newCt == '') { //  An empty input will be taken as zero
            newCt = 0;
          }
          $scope.materialCounters[matType] = n;
          alert('Count for ' + matType + ': ' + $scope.materialCounters[matType]);
        }
      }
    });
  };
});

我尝试使用 ng-bind 和双花括号表示法，但在行为上没有区别。

Answer 1

基本上，如果您想更新视图，您只需手动调用 $scope.apply()，一切都会自行更新。可能有一些 "smarter" 解决方案，但由于您使用的是 ons.notification.prompt 这看起来是最简单的解决方案。

OnsenUI、Angular 并在警告对话框后刷新 UI 组件

OnsenUI, Angular and refreshing a UI component after an alert dialog

javascript

angularjs

onsen-ui

monaca