"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>

在 页脚栏 我有这个：

<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

你的问题背后的原因是，这是从父范围原型继承的。因此，通过将 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>

详细解释见

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

Answer 2

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

引用自：

"ng-click" 在 Ionic 框架中无法正常工作 "ion-content"

"ng-click" not working out of "ion-content" in Ionic framework

javascript

angularjs

ionic-framework

ionic-view