“ng-click”在 Ionic 框架中无法使用“ion-content”

Question

我在基于 ionic 的应用程序中有一个带有 ng-model 属性的输入框。 ion-content 标签内的代码：

<ion-content class="padding">
  <input ng-model="myNumber" type="number" placeholder="Enter number">
</ion-content>

在 footer-bar 我有这个：

<div class="bar bar-footer bar-balanced" style="background-color: #00368C !important; color: #fff;">
    <div class="title">
      <button ng-click="submit(myNumber)" class="button button-clear">Submit</button>
    </div>
</div>

警报结果是未定义。

注意：当我将 button 放入 ion-content 时，它工作正常。 （这意味着js代码可以正常工作）

有什么想法吗？

Answer 1

更好、更简单的解决方案，使用<ion-header-bar> 或<ion-footer> 并将所有固定内容放在其中 - 然后将所有代码保存在同一个控制器中。

引用自：https://stackoverflow.com/a/51785866/2036221

Answer 2

问题背后的原因是 ion-content directive does create a child scope 原型继承自父范围。因此，通过将myNumber 放入输入ng-model 确实会添加到ion-content 的范围内，这与控制器myNumber 数字范围变量不同。

要使其工作，您需要在定义ng-model 时遵循dot rule，以便遵循原型继承规则（它适用于引用类型变量）。 因此，在控制器中创建一个新对象并将所有 ng-model 变量分配给它。如下所示

$scope.model = {};

然后将您想要使用的所有属性放在视图上，例如 $scope.model.myNumber 并在视图上使用它时使用它，例如 model.myNumber

标记

<ion-content class="padding">
  <input ng-model="model.myNumber" type="number" placeholder="Enter number">
</ion-content>

<div class="bar bar-footer bar-balanced" style="background-color: #00368C !important; color: #fff;">
    <div class="title">
      <button ng-click="submit(model.myNumber)" class="button button-clear">Submit</button>
    </div>
</div>

详细解释可见this answer

更优雅的做法是使用controllerAs 方法。