OnsenUI、アラートダイアログ後の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]); 
     } 
     } 
    }); 
    }; 
}); 

IはNGバインドダブル中括弧表記を使用して、両方を試みたが、中には差がなかったです動作。

Answer 1

基本的にビューを更新する場合は、$scope.apply()を手動で呼び出すことができ、すべてが自動的に更新されます。おそらく、よりスマートな解決策がありますが、ons.notification.promptを使用しているので、これは最も簡単なもののようです。