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？即使它们在同一个文件中并具有相同的控制器？？

Answer 1

pankajparkar 评论中答案的解释：

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

这就是它与 ng-model="data.model1

一起工作的原因

请参考：

AngularJS documentation on scopes

Egghead video

Answer 2

我相信 ion-footer & ion-content 创建了新的子范围，它是当前范围的 Prototypically inerherit。下面的离子代码将更好地说明它在内部是如何工作的，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

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

ion-content and ion-footer have different $scope

javascript

angularjs

cordova

angularjs-scope

ionic-framework