尝试让一个子视图使用ui-router调用另一个子视图

詹姆斯·布莱克

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

因此,当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.watchhttps://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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在添加另一个子视图之前等待一个 addSubview 成功

来自分类Dev

使Div的子代在html中显示在另一个子视图的上方

来自分类Dev

VBA EXCEL:如何在另一个子例程中调用一个子例程?

来自分类Dev

当另一个子视图改变位置时如何调整子视图的大小

来自分类Dev

Laravel 5.2:如何从另一个子视图中获取parentView的子视图中的变量?

来自分类Dev

从另一个子执行子

来自分类Dev

在父级中包含一个子视图

来自分类Dev

基于另一个子帧

来自分类Dev

从另一个子域访问Cookie

来自分类Dev

另一个子查询问题

来自分类Dev

添加一个子视图,该子视图是超级视图的一半

来自分类Dev

在同一工作表VBA中调用另一个子

来自分类Dev

将两个结果在一个子传递到另一个子

来自分类Dev

使用python multiprocessing子进程如何终止另一个子进程?

来自分类Dev

单击另一个子菜单时如何关闭一个子菜单

来自分类Dev

在MATLAB中的另一个子图中绘制一个子图

来自分类Dev

将点击事件从一个子组件传递到另一个子组件

来自分类Dev

如何将一个子域重写为另一个子域?

来自分类Dev

如何从另一个子域发送一个子域的综合浏览量

来自分类Dev

如何知道另一个子组件中一个子组件的事件

来自分类Dev

调用另一个子然后返回到第一个子以继续(vb.net)

来自分类Dev

设置子视图的中心重心会更改水平布局中另一个子视图的布局对齐方式吗?

来自分类Dev

添加到 Stackview 子视图的 CAShapeLayers 仅在一个子视图上呈现

来自分类Dev

一个子div必须溢出,另一个不能

来自分类Dev

从另一个访问一个子域

来自分类Dev

如何基于另一个zip的内容创建一个子zip?

来自分类Dev

使用嵌套的For Each和If从另一个子节点返回节点值

来自分类Dev

MongoDB-使用另一个子数组字段更新父数组字段

来自分类Dev

使用powershell将另一个子元素附加到xml

Related 相关文章

  1. 1

    在添加另一个子视图之前等待一个 addSubview 成功

  2. 2

    使Div的子代在html中显示在另一个子视图的上方

  3. 3

    VBA EXCEL:如何在另一个子例程中调用一个子例程?

  4. 4

    当另一个子视图改变位置时如何调整子视图的大小

  5. 5

    Laravel 5.2:如何从另一个子视图中获取parentView的子视图中的变量?

  6. 6

    从另一个子执行子

  7. 7

    在父级中包含一个子视图

  8. 8

    基于另一个子帧

  9. 9

    从另一个子域访问Cookie

  10. 10

    另一个子查询问题

  11. 11

    添加一个子视图,该子视图是超级视图的一半

  12. 12

    在同一工作表VBA中调用另一个子

  13. 13

    将两个结果在一个子传递到另一个子

  14. 14

    使用python multiprocessing子进程如何终止另一个子进程?

  15. 15

    单击另一个子菜单时如何关闭一个子菜单

  16. 16

    在MATLAB中的另一个子图中绘制一个子图

  17. 17

    将点击事件从一个子组件传递到另一个子组件

  18. 18

    如何将一个子域重写为另一个子域?

  19. 19

    如何从另一个子域发送一个子域的综合浏览量

  20. 20

    如何知道另一个子组件中一个子组件的事件

  21. 21

    调用另一个子然后返回到第一个子以继续(vb.net)

  22. 22

    设置子视图的中心重心会更改水平布局中另一个子视图的布局对齐方式吗?

  23. 23

    添加到 Stackview 子视图的 CAShapeLayers 仅在一个子视图上呈现

  24. 24

    一个子div必须溢出,另一个不能

  25. 25

    从另一个访问一个子域

  26. 26

    如何基于另一个zip的内容创建一个子zip?

  27. 27

    使用嵌套的For Each和If从另一个子节点返回节点值

  28. 28

    MongoDB-使用另一个子数组字段更新父数组字段

  29. 29

    使用powershell将另一个子元素附加到xml

热门标签

归档