Question

仍在学习Angular，我正在使用路由。

我的任务：我有一个示例项目，我得到了由多个站点共享的html结构。例如：有一个像

这样的路线定义

.state('start', {
            url: '/start',
            templateUrl: 'app/start/start.html',
            controller: 'StartController',
            controllerAs: 'start'

        })
        .state('login', {
            url: '/login',
            templateUrl: 'app/start/start.html',
            controller: 'StartController',
            controllerAs: 'start',
        })
        .state('logout', {
            url: '/logout',
            templateUrl: 'app/start/start.html',
            controller: 'StartController',
            controllerAs: 'start'
        })

这些路由使用相同的模板和控制器，因为内容周围有一个项目框架，只有一个html标签不同，它们也有不同的功能。

模板（app / start / start.html）就是这样：

<div layout="vertical" layout-fill>

  <md-content layout="column" flex>

    <div id="ContentHeader" layout="row">
      <div layout="column">1</div>
      <div layout="column" flex>2</div>
      <div layout="column">3</div>
    </div>

    <div id="ContentBody" layout="row" flex>

      <dynamic-template></dynamic-template>

    </div>

    <div id="ContentFooter" layout="row">2</div>

  </md-content>

</div>

现在我想动态切换指令/内容

<dynamic-template></dynamic-template>

登录/注销和启动路由使用不同的指令/控制器......

动态嵌套指令的最佳做法是什么？

问候，n00n

Answer 1

您必须使用Named Views

想法是在模板中拥有多个命名视图。然后可以针对每个州以不同方式设置这些命名视图。

如果我们举个例子，那么你需要做什么：

模板：

<div layout="vertical" layout-fill>

  <md-content layout="column" flex>

    <div id="ContentHeader" layout="row">
      <div layout="column">1</div>
      <div layout="column" flex>2</div>
      <div layout="column">3</div>
    </div>

    <div id="ContentBody" layout="row" flex>

      <div ui-view="dynamic"></div>

    </div>

    <div id="ContentFooter" layout="row">2</div>

  </md-content>

</div>

我们在此处添加了名为ui-view的新dynamic。

路由器：

.state('start', {
        url: '/start',
        views:{
                 "":{
                     templateUrl: 'app/start/start.html',
                     controller: 'StartController',
                     controllerAs: 'start'},
                "dynamic":{
                     templateUrl: 'app/start/myCustomStartView.html',
                     controller: 'StartController',
                     controllerAs: 'start'}

        })
        .state('login', {
            url: '/login',
            views:{
                 "":{
                     templateUrl: 'app/start/start.html',
                     controller: 'StartController',
                     controllerAs: 'start'},
                "dynamic":{
                     templateUrl: 'app/start/myCustomLoginView.html',
                     controller: 'StartController',
                     controllerAs: 'start'}
        })
        .state('logout', {
            url: '/logout',
            views:{
                 "":{
                     templateUrl: 'app/start/start.html',
                     controller: 'StartController',
                     controllerAs: 'start'},
                "dynamic":{
                     templateUrl: 'app/start/myCustomLogoutView.html',
                     controller: 'StartController',
                     controllerAs: 'start'}
        })

在这里，我们为每个州添加了views定义。视图名称决定了我们要定位的ui视图。所以，用＆＃34;动态＆＃34;命名的视图将定位<div ui-view="dynamic"></div>。然后，我们可以通过更改模板来控制在动态视图中填充哪个模板。

如何动态嵌套指令

1 个答案: