javascript - 无法在 Ionic 的后退按钮方法中获取范围值

Question

在同一个模板上，ionic 无法获取 ion-nav-bar 指令中的值。

问题 - 无论我在文本框中填写了多少 <input type="text" placeholder="70" ng-model="getamt">在下面提到的代码中，我能够在 Getting Amt here: {{getamt}} 处获得相同的值也就是说，如果我输入 56，我可以输入 56，如 Getting Amt here: 56 但是 我希望在 Not updating Amt {{getamt}} 打印同样的内容但在这种情况下，我没有得到任何值(value)。

我需要将这个值发送到我的上一个页面..所以我正在尝试做这些事情。

让我知道如何用 ionic 解决这个奇怪的问题。

<ion-view>
  <ion-nav-bar class="bar-stable">
    <ion-nav-back-button class="button-clear" ng-click="myGoBack(getamt)">
      <i class="icon ion-ios7-arrow-back"></i> Not updating Amt {{getamt}}
    </ion-nav-back-button>
  </ion-nav-bar>

  <ion-content class="has-subheader" padding-bottom="true">
    <div class="row">
      <div class="col col-30">
        <input type="text" placeholder="70" ng-model="getamt">
      </div>
      <div class="col col-30 item">
        Getting Amt here:  {{getamt}}
      </div>
    </div>
  </ion-content>
</ion-view>

编辑 -

我的 Controller 代码-

.controller('mystate2Ctrl', function($scope, $stateParams, $localstorage, $rootScope, $ionicHistory) {
  console.log("----- mystate2Ctrl -----");

  $scope.myGoBack = function(val){
    console.log(val);
    $ionicHistory.goBack();
  };

  $rootScope.$on( "$ionicView.leave", function( scopes, states ) {
    if( states.stateName == "app.mystate1" ) {
      console.log("In Ionic View blah blah code here");
    } 
});

Answer 1

您面临的问题与嵌套范围有关，特别是与您使用“模型”的方式有关。

范围不是模型。

我建议您观看 Miško Hevery 的这段视频，他在视频中谈到了您遇到的问题。在一些point他是这样说的:

Whenever you have ng-model there’s gotta be a dot in there somewhere. If you don’t have a dot, you’re doing it wrong.

无论如何，如果你想解决你的问题，你应该在你的 Controller 中定义一个模型。

解决方案是创建一个:

.controller('mystate2Ctrl', function($rootScope, $scope, $state) {

  $scope.mymodel = { getamt: 0 };

});

现在您可以使用点在您的 View 中引用您的模型，您的 View 应如下所示:

<ion-view view-title="my-app">

  <ion-nav-buttons side="right" class="button-clear" ng-click="myGoBack(mymodel.getamt)">
    <i class="icon ion-ios7-arrow-back"></i> Not updating Amt {{mymodel.getamt}}
  </ion-nav-buttons>

  <ion-content class="has-subheader" padding-bottom="true">
    <div class="row">
      <div class="col col-30">
        <input type="text" placeholder="70" ng-model="mymodel.getamt">
      </div>
      <div class="col col-30 item">
        Getting Amt here:  {{mymodel.getamt}}
      </div>
    </div>
  </ion-content>
</ion-view>

如果你想看看它是如何工作的，你可以查看我的 plunker .

可能最好的方法是 John Papa 在他的 Angular guidelines 中建议的方法.

如果您仔细阅读controllerAs View 语法 here他说明了为什么你应该采用这种方法:

Why?: It promotes the use of binding to a "dotted" object in the View (e.g. customer.name instead of name), which is more contextual, easier to read, and avoids any reference issues that may occur without "dotting".

Why?: Helps avoid using $parent calls in Views with nested controllers.

这是 controllerAs 的第二个 plunker样本。