javascript - ion-content 和 ion-footer 有不同的 $scope

Question

我的 ion-content 中有两个输入字段，它们都附加了一个 ng-model。然后在我的 ion-footer 中有一个 ng-click，我在其中调用一个函数并传入两个 ng-models。

当我在 ion-content 中单击 ng-click 时，一切正常，但是当我将它移到页脚时，我传递给函数的两个参数未定义。

那么这是否意味着 ion-content 和 ion-footer 具有不同的 $scope？即使它们在同一个文件中并具有相同的 Controller ？？

Answer 1

我相信 ion-footer 和 ion-content 会创建新的子作用域 Prototypically inerherit从当前范围。下面的 ionic 代码将更好地说明它在内部是如何工作的，scope: true, 负责创建一个新的子作用域。

代码

.directive('ionContent', [
  '$parse',
  '$timeout',
  '$ionicScrollDelegate',
  '$controller',
  '$ionicBind',
function($parse, $timeout, $ionicScrollDelegate, $controller, $ionicBind) {
  return {
    restrict: 'E',
    replace: true,
    transclude: true,
    require: '^?ionNavView',
    scope: true, //<-- this creates a prototypically inerherited scope
    template:
    '<div class="scroll-content">' +
      '<div class="scroll"></div>' +
    '</div>',

您需要使用. 注释将解决您的问题

例如。

如果你像原始变量一样使用变量

$scope.volume = 5

那么你需要使用:

$scope.data = { 'volume' : 5}

Angular Prototypal Scope Inheritance