尝试让一个子视图使用 ui-router 调用另一个子视图 [英] Trying to have one subview call another subview using ui-router

问题描述

我有两个子视图，一个用于类别，一个用于产品，因此是该类别的产品.我希望用户能够选择一个类别并查看该类别的所有产品.

I have two subviews, one for category and one for products, so the products for that category. I want a user to be able to select a category and see all the products for that category.

因此，当在类别行上单击 View 按钮时，我正在调用类别控制器中的函数.

So I am calling a function in the category controller when the View button is clicked on a category row.

这是函数:

   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' },
              "[e-mail]": { templateUrl: 'Templates/SalonCategoryList.html', controller: 'SalonCategoryCntrl' },
              "[e-mail]": { templateUrl: 'Templates/SalonProductList.html', controller: 'SalonProductCntrl' }
           }
     })

在我的 html 文件中，这是我定义按钮的方式:

And in my html file this is how I define the button:

   <input type="button" name="edit" value="View" class="btn btn-default" ng-click="viewSalonProducts(x)" />

如果它有任何不同，这是我对这个视图的顶视图:

And if it makes any difference this is my top view for this view:

Categories
<div ui-view="saloncategories"></div>
Products
<div ui-view="salonproducts"></div>

我的产品控制器是这样定义的，所以

My products controller is defined as this, so

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();
    }
}

因此，如果用户单击按钮，我想将类别名称(即按钮 ng-click 中 x 的值)传递给产品控制器并让它然后调用网络服务来获取和显示信息.

So, if a user clicks on the button, I want to pass the category name, which is the value of x in my button ng-click to the product controller and have it then call the webservice to get and display the information.

它会scope.watch，https://docs.angularjs.org/api/ng/type/$rootScope.Scope，然后我只需要看看如何将类别放入产品控制器的范围内.

Would it make scope.watch, https://docs.angularjs.org/api/ng/type/$rootScope.Scope, then I just need to see how to put the category in the scope for the product controller.

推荐答案

使用 UI-Router 我们不必使用 $scope.watch 在 list-detail 视图.

With UI-Router we do not have to use $scope.watch to communicate between list-detail views.

此处的原生 UI-Router 解决方案是使用 父子状态 定义.所以，状态定义应该是这样的:

The native UI-Router solution here would be to use the paren-child state defintion. So, the state definition should be like:

.state('master.categoryinfo', {
      url: '/categories',
      views: {
          '': { 
             templateUrl: 'Templates/SalonCategoryMain.html', 
             controller: 'SalonCategoryProductCntrl' 
          },
          // these views will be replaced by child state
          "[e-mail]": { 
             template: 'here will be category details', 
          },
          "[e-mail]": {
             template: 'here will be salon product details', 
          }
       }
 })

.state('master.categoryinfo.detail', {
      url: '/:productId',
      views: {
          // this notation in a child
          // "[e-mail]": {  
          // is the same as this
          "saloncategories": { 
             templateUrl: 'Templates/SalonCategoryList.html', 
             controller: 'SalonCategoryCntrl' 
          },
          "salonproducts": {
             templateUrl: 'Templates/SalonProductList.html', 
             controller: 'SalonProductCntrl' 
          }
       }
 })

这将是新的控制器定义:

And this would be the new controller 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 中:

And this way we can hook that into angularjs:

angular
   .module('MyModule')
   .controller('SalonProductCntrl', SalonProductCntrl); 

这只是一个草稿版本，但这里的重点是 - 将列表视图(用户在其中选择项目 ID)和详细视图 - 拆分为不同的状态.

This is just a drafte version, but the point here is - split the list view (where users select the item ID) and the detail view - into separated states.

好处应该很清楚，因为 productId 的任何更改都会触发新的状态转换.子数据将被更改(更新)而列表将保持不变......这就是 UI-Router 的本质，我会说

Benefit should be clear, because any change of the productId will trigger new state transition. Child data will be changed (updated) while list will stay the same... That's the essence of UI-Router, I'd say

这篇关于尝试让一个子视图使用 ui-router 调用另一个子视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！