无法在Ionic的返回按钮方法中获取作用域值

Not able to fetch scope value in back button method in Ionic

本文关键字：方法 获取 作用域 按钮 返回 Ionic      更新时间：2023-09-26

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

问题 -无论我在下面提到的代码中填写的文本框<input type="text" placeholder="70" ng-model="getamt">的数量是多少，我都能够在Getting Amt here: {{getamt}} ie中获得相同的值。如果我输入56，我能够得到56键入像Getting Amt here: 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");
    } 
});

您面临的问题与嵌套作用域有关，特别是与您使用"模型"的方式有关。

作用域不是模型

我建议你看这个来自Miško Hevery的视频，他谈论了你所遇到的问题。在某个时刻，他说了这样的话:

当你有一个n -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>

如果你想看看它是如何工作的，你可以看看我的活塞。

也许最好的方法是John Papa在他的Angular指南中建议的。

如果你仔细阅读控制器视图语法，这里他说明了为什么你应该采用这种方法:

为什么?:它促进了绑定到视图中"带点"对象的使用(例如customer.name而不是name)，这样更符合上下文，更容易阅读，并避免任何参考问题，可能会发生没有"打点"。

为什么?:有助于避免在视图中使用$parent调用控制器。

这是第二个带有controllerAs样例的柱塞

这似乎是因为，你的Getting Amt here: {{getamt}}和Not updating Amt {{getamt}}在两个不同的指令。所以确保他们都能访问mystate2Ctrl。

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

.controller('mystate2Ctrl', function($scope, $stateParams, $localstorage, $rootScope, $ionicHistory) {
  $scope.getamt = 0;
  // your code 
})

HTH

相关文章：