Angular ui-router：ui-views vs 指令？

Question

angular ui-router 允许多个嵌套视图。这些可互换视图的作用似乎与指令的作用重叠。

使用（多个，嵌套）ui-views 与 angular 的指令有什么优缺点？

更新

状态和路由是两个不同的功能。状态允许您交换 partial.html 模板及其控制器，您可以(optionally?) 指定相应的 URL/路由。

在 Tim Kindberg（ui-routerdev）的电子邮件回复中：

ui-view 是一个指令，所以如果你使用它，你就是在使用一个指令 已经特别努力与其他人一起工作 ui路由器模块。我无法想象自己动手做起来很容易 替换此功能的指令。

对此，您似乎有两种选择：

普通指令：

app.directive('myDir1', {/*  controller: ... */})
   .directive('myDir2', {/*  controller: ... */}) 

vs ui-view“指令”

$stateProvider.state('route1', {
     /*  url: "/route1", // optional?? */
      views: {
        "myDir1": { templateUrl: "myDir1.html" /* , controller: ... */ },
        "myDir2": { templateUrl: "myDir2.html" /* , controller: ... */ }
      }
    })

额外问题：

normal angular directive features 是否可用于查看？如：

• 转置
• 替换
• 隔离范围
• 编译/链接函数

如果 ui-views 是指令，那么它们的用法显然是不同的。协调这些模型不是很有意义吗？

Answer 1

经过一番思考/通信，这是我的结论：

ui-views 定义容器，状态定义容器中的内容

当您将ui-view='containerName' 指令放在一个元素上时，您就是在设置一个容纳某些东西的容器。你还没有说里面有什么。

当您创建 $stateProvider.state(...) 定义时，您正在指定这些容器中的内容：

$stateProvider.state('someState', {
  views: {
    "containerName": { templateUrl: "someContents.html" /* , controller: ... */ },
    "container2": { templateUrl: "otherContents.html" /* , controller: ... */ }
  }
})

您能否在您的 ui-views 中使用所有传统的指令功能（转置、替换、隔离范围、编译/链接功能）？我不知道。例如：

$stateProvider.state('someState', {
  views: {
    "containerName": { 
              templateUrl: "someContents.html",
              scope: { localVar: "@" },  // can you
              transclude: true,          // do this?
              controller: function(){}
    },
    "container2": { templateUrl: "otherContents.html" /* , controller: ... */ }
  }
})

---

总之，似乎每个选项都有其权衡。指令具有一些附加功能，但 ui-views 是可互换的并且可以关联路由。

Answer 2

如果你使用 Angular UI 路由器的内联视图来指向指令呢？

假设您有一个用于处理用户帐户上的 CRUD 操作的表的指令。我们会说指令被命名为user-admin。我们的路线文件如下所示：

.state('users', {
  url: '/users',
  template: "<user-admin>"
});

这会给你很多好东西：

• 让你有一个直接指向指令的网址
• 消除了当状态只是指令时需要两个模板（视图模板和指令模板）的重复
• 允许您开始将更多控制器逻辑移动到为 Angular 2.0 做准备的指令中。见here 和here。

Answer 3

看来你可以相对不受惩罚地做这样的事情：

    $stateProvider.state('general', {
        url: '/general',
        views: {
            main: {
                template: '<general-directive></general-directive>'
            }
        }
    });

Answer 4

**In Config function:**
.state('list', {
            url:'/list',
            template:'<user-info-table></user-info-table>',
            controller:'UserInfoTableController',
        });

**In Directive:**
angular.module('UserInfo').directive("userInfoTable", function() {
    return {
       templateUrl:'templates/UserInfoTable.html',
       restrict:'EA',
    };
});