由网友(迢迢岁月)分享简介：我有两个子视图，一个类别和一个产品，所以产品该类别。我希望用户能够选择一个类别，并看到所有的产品属于这一类。I have two subviews, one for category and one for products, so the products for that category. I want a u...

我有两个子视图，一个类别和一个产品，所以产品该类别。我希望用户能够选择一个类别，并看到所有的产品属于这一类。

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.

所以，当点击一个类别行的查看按钮，当我打电话类别中的一个功能。

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

这是我的状态定义是这样的：

This is what my state definition looks like:

   .state('master.categoryinfo', {
          url: '/categories',
          views: {
              '': { templateUrl: 'Templates/SalonCategoryMain.html', controller: 'SalonCategoryProductCntrl' },
              "saloncategories@master.categoryinfo": { templateUrl: 'Templates/SalonCategoryList.html', controller: 'SalonCategoryCntrl' },
              "salonproducts@master.categoryinfo": { 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();
    }
}

所以，如果用户点击该按钮时，我想通过类别名称，这是 X 在我的按钮纳克的价值-Click 有那么它调用web服务来获取和显示信息。

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-路由器我们不必使用 $ scope.watch 到列表细节的意见之间进行通信。

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

本机UI的路由器解决方案在这里将使用括号独生子女状态确定指标。因此，国家的定义应该是这样的：

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
          "saloncategories@master.categoryinfo": { 
             template: 'here will be category details', 
          },
          "salonproducts@master.categoryinfo": {
             template: 'here will be salon product details', 
          }
       }
 })

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

和这将是新的控制器DEF：

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

这仅仅是一个drafte版本，但这里的关键是 - 拆分列表视图（其中用户选择该项目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.

效益应该清楚，因为产品ID的任何变化都会引发新的状态过渡。儿童的数据将被改变（更新），而列表将保持不变......这就是UI的路由器的精髓，我想说

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