javascript - 如何从 $rootScope 变量设置 $scope 值

Question

我在 file.jade 文件中有以下代码附加到 Controller fileCtrl

文件.jade

.....
label(for='id') Id: 
input(ng-model='form.id', name='id')
p
....

文件控制

...
  $scope.submitMain = function ( path ) {
      $http.post('/api/submitMain', $scope.form).
      success(function(data) {
        alert("Submit Main Data: " + data);
        $rootScope.id = data;
        $location.path(path);
      });
  };
....

路径指向file1.jade，它具有相同的id字段，并且附加到file1Ctrl

文件1.jade

.....
label(for='id') Id: 
input(ng-model='form.id', name='id')
p
....

文件1Ctrl

$scope.form.id = $rootScope.id;

由于某种原因，在 Filectrl 中设置的 $rootScope id 没有在 file1Ctrl 中设置 form.id 值，即使这两个位置的值都是正确的。

非常感谢任何帮助。

梅尔罗伊

Answer 1

正如 SergeL 所说，如果你想通过 $rootScope 传递它，你将需要执行 $watch。 $watch 监视给定表达式的更改，并在更改时触发脚本，并且可以在任何范围内使用。

$rootScope.$watch('id', function(newVal, oldVal){
    if (newVal !== undefined) {
        $scope.form.id = newVal;
    }
});

请注意， watch 将在启动时以未定义的值触发，这就是为什么您可能需要在使用之前检查以确保它具有值。

<小时/>

但是，使用 $rootScope 可能不是最好的方法，因为您需要监视，并且在经常需要在 Controller 之间共享数据的大型项目中，您可能最终会在 rootScope 中得到大量内容，从而使冲突成为一种非常现实的可能性。更好的方法是使用服务来共享信息。

Angular 中的服务是单例的，它们只存在于一个实例中，这意味着如果两个 Controller 使用相同的服务，它们就会共享相同的数据。您可以定义一个用于共享数据的服务，如下所示:

.factory('IdStorage', [function() {
    return {};
}])

这将创建一个本质上只是一个对象的服务，并且由于服务仅存在于一个实例中，因此该对象将在使用该服务的任何对象之间共享。因此，在回调中您可以执行以下操作:

IdStorage.id = data;

在 Controller 中你可以:

$scope.form.id = IdStorage;

因为它们都引用同一个对象(因为它是单例)，所以它们总是相同的。由于 IdStorage 只是一个对象，如果您愿意，您可以在其中存储更多信息。而且，如果您需要在应用程序中共享不同的内容，则可以创建多个此类服务，因此您不会像将所有内容转储到 $rootScope 中那样面临冲突的风险。