在状态之间传递对象
Passing an object between states
我一直在尝试使用angular将模板page1中单击的对象传递给另一个名为page2的模板。我可以使用ng-click访问此对象,但无法将其传递给其他模板。我读过使用state.go()可能会起作用,但我一直没能弄清楚这一点。如果state.go()不是一个好主意,我应该使用什么?
angular.module('playground', [])
.config(function($stateProvider, $urlRouterProvider) {
"use strict";
/* Set up the states for the application's different sections. */
$stateProvider
.state('page1', {
name: 'page1',
url: '/page1',
templateUrl: 'page1.html',
controller: 'MainCtrl'
})
.state('page2', {
name: 'page2',
url: '/page2',
templateUrl: 'page2.html',
controller: 'MainCtrl'
});
$urlRouterProvider.otherwise('/page1');
})
.controller('MainCtrl', function($scope, $state) {
"use strict";
$scope.add = function(item, $stateParams) {
if ($scope.ordered.indexOf(item) > -1) {
//nothing for now
} else {
$scope.ordered.push(item);
}
console.log($scope.ordered);
};
$scope.ordered = []
$scope.menu = [{
title: 'Pizza',
type: 'entree',
favorite: true,
price: 10
}, {
title: 'Tacos',
type: 'entree',
favorite: false,
price: 5
}, {
title: 'Onion Rings',
type: 'app',
favorite: false,
price: 2
}, {
title: 'Ice Cream',
type: 'dessert',
favorite: false,
price: 11
}, {
title: 'Mac n Cheese',
type: 'app',
favorite: false,
price: 7
}, {
title: 'Salad',
type: 'salad',
favorite: true,
price: 4
}];
$scope.ordered = [];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="playground" ng-controller="MainCtrl">
<script id="page1.html" type="text/ng-template">
<div ng-repeat="item in menu">
<p>{{item.title}}</p>
<p>{{item.type}}</p>
<button ng-click="add(item);">add</button>
</div>
</script>
<script id="page2.html" type="text/ng-template">
<div ng-repeat="item in ordered">
<p>{{item.title}}</p>
<p>{{item.type}}</p>
<button>remove</button>
</div>
</script>
</body>
当您想要共享数据时,可以使用angular服务,因为所有angular服务都是singletons,因此您可以轻松地在控制器和状态之间共享数据。
例如:
控制器1
(() => {
function Controller1($scope, Service) {
$scope.test = 'In Controller 1';
$scope.service = Service;
$scope.menu = [
{
title: 'Pizza',
type: 'entree',
favorite: true,
price: 10
},
{
title: 'Tacos',
type: 'entree',
favorite: false,
price: 5
},
{
title: 'Onion Rings',
type: 'app',
favorite: false,
price: 2
},
{
title: 'Ice Cream',
type: 'dessert',
favorite: false,
price: 11
},
{
title: 'Mac n Cheese',
type: 'app',
favorite: false,
price: 7
},
{
title: 'Salad',
type: 'salad',
favorite: true,
price: 4
}
];
setTimeout(() => {
//Assign our data to the data service
Service.data = $scope.menu;
//Update the bindings
$scope.$apply();
}, 1000);
}
angular
.module('app', [])
.controller('Ctrl1', Controller1);
})();
控制器2
(() => {
function Controller2($scope, Service) {
$scope.test = 'In Controller 2';
//Retrieve instance of our data Service
$scope.service = Service;
}
angular
.module('app')
.controller('Ctrl2', Controller2);
})();
服务
(() => {
function Service() {
const obj = {
data: ''
};
return obj;
}
angular
.module('app')
.factory('Service', Service);
})();
Html
<body ng-app="app">
<div ng-controller="Ctrl1">
{{test}}
<pre>{{menu | json}}</pre>
</div>
<div ng-controller='Ctrl2'>
{{test}}
<pre>{{service.data | json}}</pre>
</div>
</body>
在本例中,我们使用数据服务将数据从控制器1传递到控制器2。你可以对你所在的州采取同样的做法。
您可以看到Working Plunker
我一直在使用Angularjs的$stateParams
服务来实现这一点。在你的路由器js文件中,你定义了每个状态的路由,你需要再定义一个参数"params",如下所示:
.state('state1', {
url: "/state1",
templateUrl: 'modules/states/state1.html',
controller: 'state1Controller',
controllerAs: 'state1Vm',
params: { 'stateVals': '' }
})
同样,也可以为状态2定义这个参数,从状态1导航到状态2。
现在,在从状态1导航到状态2之前,您可以将要在状态2中访问的对象设置如下:
state1Vm.selectedVals = {
"key1": state1Vm.content,
"key2": state1Vm.userInputs
}
$state.go('state2', { stateVals: state1Vm.selectedVals });
在到达状态2时,您可以在状态2的控制器中获得此对象,如下所示:
state2Vm.selectedVals = {
"key1": $stateParams.stateVals.key1,
"key2": $stateParams.stateVals.key2
};
请注意,您需要在两个控制器中注入$stateParams
。
相关文章:
- JavaScript中的函数和对象之间没有区别吗?
- 在控制器和数据对象之间同步数据
- 不同对象之间的递归,并将它们唯一地组合在一起,不重复
- 两个对象之间的Javascript原型
- 在window.onload之前/之后创建对象之间的区别
- 如何管理原始对象之间的数据依赖关系
- javascript中构造函数和对象之间的等价性
- 为什么 JSON 中的对象之间有逗号
- 对字符串对象调用 .localeCompare 与构造特制的 Intl.Collator 对象之间的性能差异
- 如何匹配两个对象之间的值并使用特定值创建新对象
- D3 - 在两个不与其他对象相交的对象之间绘制一条线
- 两个时间对象之间的差异
- 函数和对象之间的差异,以及它如何影响性能
- jQuery函数,用于计算两个JavaScript对象之间的差异
- jQuery 自定义事件在全局范围内工作,但在对象之间不起作用
- 以天为单位的 2 个 ember 日期时间对象之间的差异
- 使用原型和对象文字表示法创建对象之间的区别
- HTML/JS Canvas 在对象之间画线
- 在 jQuery 对象和纯 js 对象之间进行转换
- 循环遍历 JSON,在对象之间插入键/值