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

Posted 2023-02-19

【中文标题】Angular ui-router：ui-views vs 指令？

【英文标题】：Angular ui-router: ui-views vs directives?

【发布时间】：2014-05-12 11:34:34

【问题描述】：

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 是指令，那么它们的用法显然是不同的。协调这些模型不是很有意义吗？

【问题讨论】：

支持 - 尚未得到答复。我刚刚登录 SO 来问完全相同的问题，因为 ui-router 的明确指令和视图相互重叠。我的应用程序有两个部分：导航、内容，我已将它们放在两个指令中。在导航部分中，我使用指向状态的 ui-sref 链接。如何使用 ui-router 视图更改我的内容，这是一个 angular.directive。边缘有点模糊。

【参考方案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 是可互换的并且可以关联路由。

【讨论】：

如果有人在这里，我尝试了transclude: true 和ng-transclude，但它抛出了一个错误

如果必须在 state 中定义模板和控制器，ui-views 是否可以互换？我有同样的问题，但我在想，如果没有办法交换这些视图中的内容，它与指令没有什么不同。正如你所说，指令似乎更强大。

@Joao 您可以将状态的控制器和模板指定为动态返回适当控制器和模板的函数。所以是的，你可以换出内容。但是，恕我直言，此类代码的可维护性也有缺点。

【参考方案2】：

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

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

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

这会给你很多好东西：

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

【讨论】：

所以你会做这样的事情： this.basicModule.directive(constants.valutaDirectiveName, valutaDirective.ValutaDirective.Factory());然后你会像这样组成状态： this.basicModule.config(["$stateProvider", ($stateProvider:angular.ui.IStateProvider):void=> $stateProvider.state("ValutaScreen", url:" /ValutaScreen"，模板："" ); ]); ?

试图遵循这种模式你如何处理directive within a state view？在该示例中，主页内容最初加载在标题下方。我猜这是切换到指令的时间问题。但是我想不出一个干净的方法。

在多少情况下我们会遇到一个完整的模板作为指令？用于局部视图的指令已经有一个父模板。列出的不错的功能，但似乎实际上不可用或无法说服使用并将 ui-router 包含在我的项目文件中。

【参考方案3】：

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

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

【讨论】：

你需要限制，否则它不会在浏览器中加载