gpt4 book ai didi

AngularJS 观察服务值变化而不是范围继承

转载 作者:行者123 更新时间:2023-12-03 08:06:43 25 4
gpt4 key购买 nike

我只是尝试使用 AngularJS。我尝试做一些非常简单的事情,但我想以好的方式去做。

我在表格中得到了一个项目列表,其中显示了每个项目的名称和数量。我在 table 底下有一张表格。

当我点击表格中的项目名称时,我希望给定的项目可以通过表单进行更新。

我实现了用作用域继承做事,就像在 fiddle 中一样 http://jsfiddle.net/5cRte/1/

查看:

<tr ng-repeat="item in items">
<td><a href="#" ng-click="selectCurrentItem(item)">{{item.name}}</a></td>
<td>{{item.quantity}}</td>
</tr>

Controller :

function ItemListController($scope){
$scope.items = [{name:'item1', quantity:10}, {name:'item2', quantity:5}];

$scope.selectCurrentItem = function(currentItem) {
$scope.currentItem = currentItem;
}
}

function ItemFormController($scope){
$scope.$watch('currentItem', function() {
$scope.item = $scope.currentItem;
});
}

但是我是否读过一些主题,以这种方式耦合 Controller 作用域并不是一个好习惯,而且我最好不要使用服务来存储 Controller 之间共享的变量。

我能够在服务中放置一个静态变量并在另一个 Controller 中检索它,但是在单击表中的项目时我无法更新它,因为 watch 无法处理服务变量。您对此有什么提示吗?

提前致谢

最佳答案

我不知道这是否是最优的,但这是我能想到的

angular.module('myApp', []);

angular.module('myApp').factory('myService', function(){
var items = [{name:'item1', quantity:10}, {name:'item2', quantity:5}, {name:'item3', quantity:50}];
var current = {};
return {
getItems: function(){
return items;
},

setCurrentItem: function(item){
current.item = item;
},

removeCurrentItem: function(){
delete current.item;
},

getCurrent: function(){
return current;
}
}
});

function ItemListController($scope, myService){
$scope.items = myService.getItems();

$scope.selectCurrentItem = function(currentItem) {
myService.setCurrentItem(currentItem);
}
}

function ItemFormController($scope, myService){
$scope.current = myService.getCurrent();
}

演示:Fiddle

关于AngularJS 观察服务值变化而不是范围继承,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15158827/

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