“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