Angular UI Router：根据父解析对象确定子状态模板

一尘不染

Angular UI Router：根据父解析对象确定子状态模板

angularjs

这是我的app.js文件-我有一个父状态和两个子状态。两个子视图都需要该对象。

    states.push({
      name: 'parentstate',
      url: '/parent/:objId',
      abstract: true,
      templateUrl: 'views/parentview.html',
      controller: function() {},
      resolve: {
        obj: function(OBJ, $stateParams) {
          return OBJ.get($stateParams.objId);
        }
      }
    });

我想使用此已解析的obj来决定子模板

    states.push({
      name: 'parentstate.childs',
      url: '/edit',
      views: {
        "view1@parentstate": {
          templateUrl: 'views/view1',
          controller: 'view1Ctrl'
        },
        "view2@parentstate": {
          templateUrl: function(obj) {
            if (obj.something == something) {
              return "views/view2first.html";
           } else {
              return 'views/view2second.html';
            }
          },
          controller: 'view2Ctrl'
        }
      }  
    });

我怎样才能做到这一点？

阅读 232

2020-07-04

共1个答案

一尘不染

有一个可行的例子。而不是templateUrl我们应该使用templateProvider。这是新的状态def：

  $stateProvider
    .state('parentstate.childs', {
      url: '/edit',
      views: {
        "view1@parentstate": {
          templateUrl: 'views.view1.html',
          controller: 'view1Ctrl',
        },
        "view2@parentstate": {
          templateProvider: function($http, $stateParams, OBJ) {

            var obj = OBJ.get($stateParams.objId);
            var templateName = obj.id == 1
              ? "views.view2.html"
              : "views.view2.second.html"
              ;

            return $http
                  .get(templateName)
                  .then(function(tpl){
                    return tpl.data;
                  });
          },
          controller: 'view2Ctrl',
        }
      }
    });

我们为什么要使用这种方法？如此处记录：

范本

TemplateUrl
… templateUrl也可以是返回url的函数。 它采用一个预设参数stateParams，该参数不会被注入。

TemplateProvider
或者您可以使用 模板提供程序 函数，该函数 可以被注入，可以访问locals 并且必须返回模板HTML，如下所示：

检查TemplateProvider此工作插销中的基础解决方案

2020-07-04