如何动态嵌套指令答案

【问题标题】：How can I nest directives dynamically如何动态嵌套指令
【发布时间】：2017-05-20 10:38:19
【问题描述】：

仍在学习 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

【问题讨论】：

我认为 动态模板 的目的是根据用户触发的内容（例如关于页面或联系页面）显示不同的内容是否正确？
您将“登录”状态存储在哪里？只需将该状态解析为您的指令并使用软件开关进行处理。
@user2340824 就是这样，得到了 2 个模板，其中包含一个在路线上不同的 div ...如何解决它？
@n00n 答案对你有用吗？

标签： angularjs angularjs-directive controller angular-ui-router

【解决方案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-view。因此，以“动态”命名的视图将针对 <div ui-view="dynamic"></div>。然后，我们可以通过更改模板来控制要在动态视图中填充的模板。

【讨论】：