Question

在同一模板上，离子无法获得ion-nav-bar指令中的值。

问题 - 无论我在下面提到的代码中填写文本框<input type="text" placeholder="70" ng-model="getamt">的金额是多少，我都可以在Getting Amt here: {{getamt}}获得相同的值，即如果我输入56我能够像Getting Amt here: 56 那样输入56但是我期望在Not updating Amt {{getamt}}打印相同但在这种情况下我没有得到任何价值。

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

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

<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('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

似乎是因为，您的Getting Amt here: {{getamt}}和Not updating Amt {{getamt}}在两个不同的指令中。因此，请确保他们都可以访问mystate2Ctrl。

尝试在控制器本身中定义变量。

.controller('mystate2Ctrl', function($scope, $stateParams, $localstorage, $rootScope, $ionicHistory) {

  $scope.getamt = 0;
  // your code 
})

HTH

Answer 2

您遇到的问题与嵌套作用域有关，特别是与您使用“模型”的方式有关。

范围不是模型。

我建议你观看MiškoHevery的这段视频，在那里他谈到你遇到的问题。在某些point他说的是这样的话：

每当你有ng-model时，那里必须有一个点。如果你没有点，那你就错了。

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

解决方案是创建一个：

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

  $scope.mymodel = { getamt: 0 };

});

现在，您可以使用点在视图中引用模型，您的视图应如下所示：

<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 Syntax here，他会说明为什么要采用这种方法：

为什么？：它促进了对视图中“虚线”对象的绑定的使用   （例如customer.name而不是name），这更加容易上下文   阅读，并避免任何可能发生的参考问题   “打点”。

为什么？：帮助避免在嵌套的视图中使用$ parent调用   控制器。

这是第二个带有controllerAs样本的插件。

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

2 个答案: