“ng-click”在离子框架中无法解决“离子内容”

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>

警报结果是undefined 。

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

任何的想法？

Answer 1

问题背后的原因是， ion-content指令确实创建了一个子范围 ， 该子范围通常是从父范围继承的。 因此，通过将myNumber放置在输入ng-model确实会在ion-content的范围内添加，这与控制器myNumber number范围变量不同。

为了使其工作，您需要在定义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>并将所有固定内容放在那里 - 然后将所有代码保存在同一个控制器中。

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