Angular Ui-router：ui-views vs指令？
angular度ui路由器允许多个嵌套视图 。 这些可互换的观点的作用似乎与指示的作用重叠。
使用（多重嵌套） ui-view vs angular的指令有什么优点/缺点？
UPDATE
状态和路由是两个不同的function。 各国允许你换出partial.html模板及其控制器，你可以（可选地）指定相应的URL /路由。
在Tim Kindberg（一个ui-router dev）的电子邮件回复中：
ui-view是一个指令，所以如果你使用它，你正在使用一个特定的指令来处理ui-router模块的其他部分。 我无法想象它很容易推出自己的指令来取代这个function。
对此，看起来你可以有两个select：
正常指令：
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: ... */ } } })
奖金问题：
正常的angular度指示function是否可用于视图？ 如：
- Transclude
- 更换
- 隔离范围
- 编译/链接function
如果ui-views是指令，看起来他们的用法是不一样的。 协调这些模型没有意义吗？
如果你使用Angular UI路由器的内联视图来指向指令呢？
假设您有一个处理用户帐户CRUD操作的表指令。 我们会说这个指令被命名为user-admin 。 我们的路线文件看起来像这样：
.state('users', { url: '/users', template: "<user-admin>" });
这会给你很多好东西：
- 允许你有一个指向直接指向的URL
- 删除需要两个模板（查看模板和指令模板）时的状态只是一个指令的重复
- 允许您开始将更多的控制器逻辑转换为适用于Angular 2.0的指令。 看到这里和这里 。
经过一番思考/对应，这是我的结论：
ui-views定义容器，状态定义这些容器中的内容
当你在一个元素上放置一个ui-view='containerName'指令时，你正在设置一个容器。 你还没有说什么在那里。
当你创build你的$stateProvider.state(...)定义时，你需要指定这些容器中的内容：
$stateProvider.state('someState', { views: { "containerName": { templateUrl: "someContents.html" /* , controller: ... */ }, "container2": { templateUrl: "otherContents.html" /* , controller: ... */ } } })
你可以使用所有的传统指令function（transclude，replace，隔离范围，编译/链接function）与你的用户界面？ 我不确定。 例如：
$stateProvider.state('someState', { views: { "containerName": { templateUrl: "someContents.html", scope: { localVar: "@" }, // can you transclude: true, // do this? controller: function(){} }, "container2": { templateUrl: "otherContents.html" /* , controller: ... */ } } })
总之，似乎每个选项都有其折衷。 指令有一些额外的function，但UI视图是可互换的，可以有相关的路线。
看来你可以这样做，相对不受惩罚：
$stateProvider.state('general', { url: '/general', views: { main: { template: '<general-directive></general-directive>' } } });
**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', }; });
