我有两个子视图,一个用于类别,一个用于产品,因此该类别的产品。我希望用户能够选择一个类别并查看该类别的所有产品。
因此,当View
单击类别行上的按钮时,我正在类别控制器中调用一个函数。
这是功能:
self.$scope.viewSalonProducts = function (categoryNumber: string) {
alert(categoryNumber + " " + self.dataSvc);
self.dataSvc.category = categoryNumber;
self.state.go("salonproducts");
}
这是我的状态定义:
.state('master.categoryinfo', {
url: '/categories',
views: {
'': { templateUrl: 'Templates/SalonCategoryMain.html', controller: 'SalonCategoryProductCntrl' },
"[email protected]": { templateUrl: 'Templates/SalonCategoryList.html', controller: 'SalonCategoryCntrl' },
"[email protected]": { templateUrl: 'Templates/SalonProductList.html', controller: 'SalonProductCntrl' }
}
})
在我的html文件中,这就是我定义按钮的方式:
<input type="button" name="edit" value="View" class="btn btn-default" ng-click="viewSalonProducts(x)" />
如果有什么不同,这是此视图的俯视图:
Categories
<div ui-view="saloncategories"></div>
Products
<div ui-view="salonproducts"></div>
我的产品控制器定义为
export class SalonProductCntrl {
private $scope: Extensions.IProductsDisplayScope;
private dataSvc: giftCertDataSvc;
private init(): void {
var self = this;
self.dataSvc.getProductsBySalon().then(function (data) {
self.$scope.products = data;
});
}
constructor($scope: Extensions.IProductsDisplayScope, giftCertDataSvc: giftCertDataSvc) {
this.$scope = $scope;
this.dataSvc = giftCertDataSvc;
this.init();
}
}
因此,如果用户单击按钮,我想将类别名称(即x
按钮中的值)ng-click
传递给产品控制器,然后让它调用Web服务以获取并显示信息。
难道做scope.watch
,https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope,那么我只需要看到如何把类范围的产品控制器。
通过使用,UI-Router
我们不必使用列表详细视图$scope.watch
之间进行通信。
这里的本机UI-Router解决方案是使用paren-child状态定义。因此,状态定义应类似于:
.state('master.categoryinfo', {
url: '/categories',
views: {
'': {
templateUrl: 'Templates/SalonCategoryMain.html',
controller: 'SalonCategoryProductCntrl'
},
// these views will be replaced by child state
"[email protected]": {
template: 'here will be category details',
},
"[email protected]": {
template: 'here will be salon product details',
}
}
})
.state('master.categoryinfo.detail', {
url: '/:productId',
views: {
// this notation in a child
// "[email protected]": {
// is the same as this
"saloncategories": {
templateUrl: 'Templates/SalonCategoryList.html',
controller: 'SalonCategoryCntrl'
},
"salonproducts": {
templateUrl: 'Templates/SalonProductList.html',
controller: 'SalonProductCntrl'
}
}
})
这将是新的控制器def:
export class SalonProductCntrl
{
private init(): void
{
this.dataSvc
// here we can pass the product Id
.getProductsBySalon(this.$stateParams.productId)
// here we use arrow function
// which does take care for us about this
.then((data) => {
this.$scope.products = data;
});
}
// this notation will do the same - all params will be private
// available via this.
constructor(private $scope: Extensions.IProductsDisplayScope
, private $stateParams: ng.ui.IStateParamsService
, private giftCertDataSvc: giftCertDataSvc)
{
this.init();
}
static $inject = ['$scope', '$stateParams', 'giftCertDataSvc'];
}
这样我们就可以将其挂接到angularjs中:
angular
.module('MyModule')
.controller('SalonProductCntrl', SalonProductCntrl);
这只是草稿版本,但这里的要点是-将列表视图(用户在其中选择项目ID)和详细信息视图-分离成单独的状态。
好处应该很清楚,因为productId的任何更改都会触发新的状态转换。子数据将被更改(更新),而列表将保持不变...这就是UI-Router的本质,我会说
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句