javascript - $scope.data 未定义但 $scope.data 存在于 $scope

Question

我在这里有我的 javascript 代码:

 define(['controllers/controllers', 'services/alerts'], function(module) {
  'use strict';
  return module.controller('alerts', [
    '$scope', '$http', 'alerts', function($scope, $http, alerts) {
    console.log('alerts controller initialized');
    $scope.settings = {};
    return $scope.submit = function() {
      $scope.busy = true;
      console.log('scope', $scope);
      return console.log('data', $scope.data);
    };
  }
]);

});

我尝试记录 $scope.data 的内容我希望包含 ng-model 的值=> data.followers但总是显示未定义但是当我尝试记录 $scope 的值内容时, $scope.data存在。如图所示:

我尝试初始化 $scope.data但在更改 ng-model 的值后它总是返回一个空数组=> data.followers .这是我初始化 ng-model 时的代码(在 haml 中) :

 %input{:type => "checkbox", "ng-checked" => "settings.#{$key}", "ng-model" => "data.#{$key}", "ng-true-value" => "true", "ng-false-value" => "false", "ng-click" => "submit()"}

有什么想法吗？

更新:

已经解决了这个问题。我所做的只是初始化 $scope.data 并使用 data.#{$key} 在 ng-checked 中。那让我卡住了。这里是 Angular 程序员新手。

Answer 1

当延迟加载 Angular 组件时，需要使用 $scope.$apply()。当使用 Require 或其他一些方法延迟加载组件时，这些函数将注册到 Angular 的 $digest 循环之外的 $scope 中。使用 $scope.$apply() 使 $digest 知道您的绑定(bind)，并将它们带到应用程序实例中。

您可能还需要使用 module.register.controller 而不是 module.controller

define(['controllers/controllers', 'services/alerts'], function(module) {
  'use strict';
  return module.register.controller('alerts', [
    '$scope', '$http', 'alerts', function($scope, $http, alerts) {
    console.log('alerts controller initialized');
    $scope.settings = {};
    return $scope.submit = function() {
      $scope.busy = true;
      console.log('scope', $scope);
      return console.log('data', $scope.data);
    };
    $scope.$apply();
  }
]);