Question

http://play.ionic.io/app/81ff26fc9a28

<body ng-app="app">
    <ion-pane ng-controller="myCtrl">
      <ion-header-bar class="bar-stable">
      </ion-header-bar>
      <ion-content class="padding">
        <input ng-model="myInput" style="border:1px solid #ddd;width:100%;padding:5px" type="text" placeholder="search"/>


        <br>
        <br>
        <br>
        <br>
        <br>
         <ion-footer-bar ng-show="!loading" align-title="center">
    <div class="padding" style="position:absolute;bottom:0;width:100%">
      <button ng-click="search(myInput)" class="button button-block button-positive footer-btn" type="submit">able to get myInput value if put within ion-content</button>
    </div>
  </ion-footer-bar>


      </ion-content>

      <ion-footer-bar ng-show="!loading" align-title="center">
    <div class="padding" style="position:absolute;bottom:0;width:100%">
      <button ng-click="search(myInput)" class="button button-block button-positive footer-btn" type="submit">cannot get myInput value here</button>
    </div>
  </ion-footer-bar>


    </ion-pane>
  </body>

如何解决这个问题？为了造型，我必须将click事件和输入字段放在2个不同的指令中，但这会导致问题我无法获得ng-model的值。

Answer 1

这是使用$scope有问题的情况。一种可能的解决方案是使用ControllerAs syntax代替。

ControllerAs语法允许您轻松识别特定函数或属性所属的控制器，并强制“始终使用点”规则用于角度，避免任何prototype inheritance issues。

这不是解决问题的唯一方法，但这是一个有助于构建更强大的应用程序的解决方案，与$scope相关的问题更少。

http://play.ionic.io/app/df429e85d209

angular.module('app', ['ionic'])



.controller('myCtrl', function() {
  var ctrl = this;
  ctrl.search = function(value) {
    alert(value);
  };
});

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <link href="https://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
  <script src="https://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
</head>

<body ng-app="app">
  <ion-pane ng-controller="myCtrl as ctrl">
    <ion-header-bar class="bar-stable">
    </ion-header-bar>
    <ion-content class="padding">
      <input ng-model="ctrl.myInput" style="border:1px solid #ddd;width:100%;padding:5px" type="text" placeholder="search" />


      <br>
      <br>
      <br>
      <br>
      <br>
      <ion-footer-bar ng-show="!loading" align-title="center">
        <div class="padding" style="position:absolute;bottom:0;width:100%">
          <button ng-click="ctrl.search(ctrl.myInput)" class="button button-block button-positive footer-btn" type="submit">able to get myInput value if put within ion-content</button>
        </div>
      </ion-footer-bar>


    </ion-content>

    <ion-footer-bar ng-show="!loading" align-title="center">
      <div class="padding" style="position:absolute;bottom:0;width:100%">
        <button ng-click="ctrl.search(ctrl.myInput)" class="button button-block button-positive footer-btn" type="submit">cannot get myInput value here</button>
      </div>
    </ion-footer-bar>


  </ion-pane>
</body>

</html>

Answer 2

这是固定代码http://play.ionic.io/app/77035b24f58a

问题是两个按钮之间的$scope不同，因此$scope.myInput值未正确共享。

一种解决方案是添加$scope.model = {};并引用模型对象，例如ng-model="model.myInput"和ng-click="search(model.myInput)"。然后内部范围将访问相同的model对象。

这是演示此问题的简化代码

var scope = {};
scope.myInput = '1';
var innerScope = Object.create(scope);
console.log(innerScope.myInput); // 1
innerScope.myInput = '2'; // myInput is 2 on innerScope
console.log(innerScope.myInput); // 2
console.log(scope.myInput); // 1 <-- but still 1 on scope

scope.model = {};
scope.model.myInput = '1';
console.log(innerScope.model.myInput); // 1
innerScope.model.myInput = '2'; // 
console.log(innerScope.model.myInput); // 2
console.log(scope.model.myInput); // 2 <-- modify model.Input is visible on parent scope because they are modifying a same model object

ng-model不起作用btw 2指令（离子）

2 个答案: