ion-content 和 ion-footer 有不同的 $scope答案

【问题标题】：ion-content and ion-footer have different $scopeion-content 和 ion-footer 有不同的 $scope
【发布时间】：2015-07-19 03:13:32
【问题描述】：

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

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

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

【问题讨论】：

创建一个类似$scope.data = {} 的范围并将所有绑定在html.place 上的ng-model 放在这个对象中，例如ng-model="data.model1"，ng-model="data.model2"
@pankajparkar 太棒了！奇迹般有效！但我仍然很好奇为什么它没有像以前那样工作？在我的控制器中没有预定义变量的 ng-model 的情况下，内容和页脚是否具有不同的范围？只是好奇。
我相信 ion-content 和 ion-footer 确实创建了一个子范围..&正如您在控制器中声明的 $scope.data = {} 并访问它的内部属性..这将继承范围父母..我应该添加答案吗？
@pankajparkar 是的，去吧，因为你是解决我问题的人！

标签： javascript angularjs cordova angularjs-scope ionic-framework

【解决方案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

【讨论】：

【解决方案2】：

pankajparkar 对 cmets 中答案的解释：

ion-content 指令有了新的作用域。它使用点表示法工作（在处理范围继承时很重要）

这就是它与 ng-model="data.model1 一起使用的原因

请参考：

AngularJS documentation on scopes

Egghead video

【讨论】：