角度ui路由器:ui视图vs指令?

The angular ui-router allows multiple nested views. The role of these interchangeable views seems to overlap the role of directives.

有角度的ui-路由器允许多个嵌套视图。这些可互换视图的作用似乎与指示的作用重叠。

What are the pros/cons to using (multiple, nested) ui-views vs angular's directives?

使用(多个，嵌套的)ui视图与角的指示有什么优缺点?

UPDATE

States and routing are 2 different functions. States allow you to swap out partial.html templates and their controllers, and you can (optionally?) specify a corresponding URL/route.

状态和路由是两个不同的函数。状态允许你交换部分。html模板及其控制器，您可以(可选?)指定相应的URL/路由。

In an email response from Tim Kindberg (a ui-router dev):

在Tim Kindberg的电子邮件回复中(ui-router开发):

ui-view is a directive, so if you use it you are using a directive that has been worked on particular to work well with the rest of the ui-router module. I can't imagine it being easy to roll your own directive to replace this functionality.

ui-view是一个指令，所以如果你使用它，你就会使用一个指令，这个指令特别适用于ui-router模块的其他部分。我无法想象用你自己的指令替换这个功能是多么容易。

And to this, it seems you could have 2 options:

对此，你可以有两种选择:

Normal Directives:

正常的指令:

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

vs ui-view "Directives"

与用户界面视图“指令”

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

Bonus question:

另外一个问题是:

Are normal angular directive features available to views? Such as:

视图是否具有正常的角指向特征?如:

Transclude
Transclude
Replace
取代
Isolate scoping
隔离范围
Compile / linking functions
编译/连接函数

If ui-views ARE directives, it seems clear their usage is different. Wouldn't it make sense to harmonize these models?

如果ui视图是指令，显然它们的用法不同。协调这些模型不是很有意义吗?

4 个解决方案

#1

How about if you used Angular UI router's inline views to point to directives?

如果您使用角UI路由器的内联视图指向指令呢?

Let's say you have a directive for a table that handles CRUD operations on user accounts. We'll say the directive is named user-admin. Our routes file would look like:

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

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

This would give you many nice things:

这会给你很多美好的东西:

Allow you to have a url that points straight to a directive
允许您拥有指向指令的url
Removes the duplication of needing two templates (view template and directive template) when a state is just a directive
当一个状态只是一个指令时，删除需要两个模板(视图模板和指令模板)的重复
Allow you to start moving more controller logic into directives in prep for Angular 2.0. See here and here.
允许您在准备角2.0时开始将更多的控制器逻辑移动到指令中。看到这里和这里。

#2

After some thinking/ correspondence, here's my conclusion:

经过一些思考/通信，我的结论是:

ui-views define containers, and states define what goes in those containers

ui视图定义容器，状态定义容器中的内容

When you put a ui-view='containerName' directive on an element, you're setting up a container that holds something. You haven't yet said anything about what goes in there.

当您在元素上放置ui-view='containerName'指令时，您正在设置一个包含某些内容的容器。你还没说什么。

When you create your $stateProvider.state(...) definitions, you're specifying what goes in these containers:

当您创建您的$stateProvider.state(…)定义时，您指定了这些容器中的内容:

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

Can you use all the traditional directive functionality (transclude, replace, isolate scoping, compile/linking functions) with your ui-views? I'm not sure. For example:

您是否可以使用所有的传统指令功能(transclude、替换、隔离范围、编译/链接函数)与ui视图?我不确定。例如:

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

In conclusion, it seems like each option has its tradeoffs. Directives have some additional features, yet ui-views are interchangeable and can have routes associated.

总之，似乎每个选项都有它的权衡。指令有一些附加的特性，但是ui视图是可以互换的，并且可以有关联的路由。

#3

It seems you can do something like this with relative impunity:

似乎你可以相对不受惩罚地做这样的事情:

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

#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',
    };
});

#1