gpt4 book ai didi

javascript - 在 Angular Controller 之间共享大对象

转载 作者:行者123 更新时间:2023-11-27 23:10:57 25 4
gpt4 key购买 nike

我正在尝试使用服务在两个 Controller 之间共享数据。但使用 XHR 更改数据后我没有看到数据更新。

angular    
.module('appy', [])
.service('MyService', function($http){
return {
dataToChange: {
},
ajaxy: function(url){
var self = this;
setTimeout(function(){
console.log('now we are in the service!');
self.dataToChange = 'something new';
console.log(this.dataToChange);
}, 1000);
}
};
})
.controller('c1', ['$scope', 'MyService', function($scope, MyService){
$scope.myService = MyService;
$scope.ajaxy = function(){
$scope.myService.ajaxy();
};
}])
.directive('dirOne', function(){
return {
restrict: 'E',
templateUrl: 'dirone-temp.html'
};
})
.controller('c2', ['$scope', 'MyService', function($scope, MyService){

$scope.myData = MyService.dataToChange;

}])
.directive('dirTwo', function(){
return {
restrict: 'E',
templateUrl: 'dirtwo-temp.html'
};
});

但是当 ajaxy 进行更新时什么也没有发生。我尝试按照 this question 的推荐进行设置。没有喜悦。我还尝试添加 watch 。

$scope.$watch(function(){
return MyService.ajaxy();
}, function(oldVal, newVal){
$scope.somethingToChange = newVal;
console.log($scope.somethingToChange);
});

但是仍然没有发生任何事情。而且这个物体相当大。我不想$watch它。

JSBIN

最佳答案

当您想要像您尝试做的那样共享数据时,您必须共享一个对象(如您给出的示例)并且永远不要替换该对象。如果您确实替换了服务中的对象,$scope 仍将引用旧对象,这就是您的情况的问题。

  1. 您将 MyService.dataChange 设置为空对象。
  2. 您将该对象注入(inject)到 Controller 的范围内
  3. 当您调用 ajaxy() 时,您将 MyService.dataChange 更改为字符串“something new”。此时,作用域仍然保留对旧对象的引用,而不是对字符串的引用。

要解决此问题,您需要向该对象添加一个属性,而不是替换 MyService.dataChange。当您绑定(bind)到共享对象的该属性时,您会注意到必须运行 ajaxy() 两次。要解决这个问题,您需要使用 Angular $timeout,而不是使用超时。

angular    
.module('appy', [])
.service('MyService', function($http, $timeout){
return {
// never replace this object, put the values you want to share as a property inside.
sharedObject: {
name: 'old value'
},
ajaxy: function(url){
var self = this;
// use the angular version of $timeout to make sure your scope is in sync
$timeout(function(){
console.log('now we are in the service!');
self.sharedObject.name = 'new value';
console.log(self.sharedObject);
}, 1000);
}
};
})
.controller('c1', ['$scope', 'MyService', function($scope, MyService){
$scope.myData = MyService.sharedObject;
$scope.ajaxy = function(){
MyService.ajaxy();
};
}])
.directive('dirOne', function(){
return {
restrict: 'E',
templateUrl: 'dirone-temp.html'
};
})
.controller('c2', ['$scope', 'MyService', function($scope, MyService){
$scope.myData = MyService.sharedObject;
}])
.directive('dirTwo', function(){
return {
restrict: 'E',
templateUrl: 'dirtwo-temp.html'
};
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body ng-app="appy">

<dir-one ng-controller="c1"></dir-one>
<hr>
<dir-two ng-controller="c2"></dir-two>

<script id="dirone-temp.html" type="text/ng-template">
template one
<button ng-click="ajaxy()">something time consuming</button>
<div>{{myData.name}}</div>
</script>

<script id="dirtwo-temp.html" type="text/ng-template">
template two
<div>{{myData.name}}</div>
</script>
</body>
</html>

关于javascript - 在 Angular Controller 之间共享大对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36190128/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com