Question

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

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

更新

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

Tim Kindberg（ui-router dev）的电子邮件回复：

ui-view是一个指令，因此如果您使用它，则使用指令已经特别努力与其他人合作 ui-router模块。我无法想象你自己也很容易用于替换此功能的指令。

对此，您似乎可以有两个选择：

正常指令：

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: ... */ }
      }
    })

奖金问题：

视图可以使用normal angular directive features吗？如：

Transclude
替换
隔离范围
编译/链接功能

如果ui-views ARE指令，似乎很明显它们的用法不同。协调这些模型是不是有意义？

Answer 1

如果您使用Angular UI路由器的内联视图指向指令，该怎么样？

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

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

这会给你很多好处：

允许您拥有直接指向指令的网址
当状态只是一个指令时，删除需要两个模板（视图模板和指令模板）的重复
允许您开始将更多控制器逻辑移动到Angular 2.0准备中的指令中。请参阅http://api.jquery.com/jquery.ajax/和here。

Answer 2

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

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

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

更新

4 个答案: