角UI路由器使用$ stateParams和嵌套模板，误差动态创建的模板，$ stateParams是不确定的 [英] Angular ui-router dynamically create template using $stateParams and nested templates, error, $stateParams are undefined

问题描述

你好我想基于URI例如，联系人/简会使用模板contacts.jane.html动态创建的模板

Hi I'm trying to dynamically create templates based on the uri eg, contacts/jane would use the template contacts.jane.html

contacts.js

contacts.js

'use-strict';

angular.module('meanApp')
.config(function ($stateProvider) {
  $stateProvider
    .state('contacts', {
        url: '/contacts',
        controller: 'ContactsCtrl',
        views: {
            '': {
                templateUrl: 'app/contacts/contacts.html'
            },
            'list@contacts': {
                templateUrl: 'app/contacts/contacts.list.html'

            },
            'details@contacts': {
                templateUrl: function ($stateParams) {
                   return 'app/contacts/' + $stateParams.id + '.html';
                },
                controller: function ($scope, $stateParams) {

                }
            }
        }
    })
    .state('contacts.details', {
        url: '/:id',
        controller: 'ContactsCtrl'
    });
  });

contacts.html

contacts.html

<div ng-controller="ContactsCtrl">
<h1>My Contacts</h1>
<div ui-view="details"></div>
<div ui-view="list"></div>

推荐答案

有一个工作示例的。我们这儿所需要的，是定义的子里面的模板的状态：

There is a working example. What we need here, is to define the template inside of the child state:

  $stateProvider
    .state('contacts', {
      url: '/contacts',
      controller: 'ContactsCtrl',
      views: {
        '': {
          templateUrl: 'app/contacts/contacts.html'
        },
        'list@contacts': {
          templateUrl: 'app/contacts/contacts.list.html'

        },
        'details@contacts': {
          // this could be, filled on a contacts state
          // with some default content
          template: "place for detail",
        }
      }
    })
    // this state has the 'id' defined
    // so, here we can decide which template to use
    // based on the $stateParams
    .state('contacts.details', {
      url: '/:id',
      views: {
        "details": {
          controller: 'ContactsCtrl',
          templateUrl: function($stateParams) {
            url = 'app/contacts/' + $stateParams.id + '.html'
            return url;
          },
        }
      }
    });

此外，控制器的状态定义使模板接触者/例如可以是这样的（无NG-控制器）的：

Also, the controller is defined in state so the template contacts should/could for example look like this (no ng-controller):

<div>
 <h1>My Contacts</h1>
 <div ui-view="list"></div>

 <hr />
 <div ui-view="details"></div>
</div>

检查行动 rel=\"nofollow\">

Check that in action here

这篇关于角UI路由器使用$ stateParams和嵌套模板，误差动态创建的模板，$ stateParams是不确定的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！