多视图未更新Angular JS中的变量

Multiple view not updating variable in Angular JS

本文关键字：变量 JS Angular 视图 更新      更新时间：2023-09-26

我使用Angular JS中的一个工厂，使用路由器ui在两个控制器/子视图之间共享数据。

工厂：

app.factory('SharedData', function() {
  return {data: {}};
})

作业控制器：

app.controller("JobsController", function($scope, $http, $resource, $location, $stateParams, JobsService, $state, SharedData) {
  SharedData.data = JobsService.query();
  $scope.data = SharedData.data; 
});

导航控制器：

app.controller("navController", function($scope, $state, SharedData) {
  $scope.data = SharedData.data;
});

jobs.html

{{data.jobs.length}} // this updates fine

nav.html

{{data.jobs.length}} // this does not update

相反，我必须这样做：

导航控制器：

app.controller("navController", function($scope, $state, SharedData) {
  $scope.data = SharedData;
});

jobs.html

{{data.jobs.length}} // this works fine

nav.html

{{data.data.jobs.length}} // this now works but not sure why the extra 'data' is needed?

很明显，我在这里做错了什么，但尽管我在谷歌上搜索了好几个小时，我还是想不出是什么。。。有人能帮忙吗？

这个怪癖与分配顺序有关。

初始化SharedData时，它是一个具有单个属性data的对象，该属性为空对象。

当navController被初始化时，它的$scope.data被设置为等于空对象SharedData.data。

初始化jobsController时，它用一个完全不同的对象替换SharedData.data在此之后，$scope.data被设置为等于此新对象，但navController仍然指向原始空对象。

在第二个示例中，navController并没有指向即将被替换的对象。相反，它指向SharedData对象本身，因此$scope.data.data将始终解析SharedData上当前存在的任何对象。

相关文章：