Angular ui-router:ui-views vs 指令? [英] Angular ui-router: ui-views vs directives?

问题描述

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

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

使用(多个、嵌套)ui-views 与 angular 的指令相比有什么优点/缺点?

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

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

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.

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

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

ui-view 是一个指令，所以如果你使用它，你就是在使用一个指令一直致力于与其他人很好地合作ui路由器模块.我无法想象自己动手制作很容易指令替换此功能.

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.

对此，您似乎有两个选择:

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

正常指令:

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

奖励问题:

视图是否可以使用普通的角度指令功能?如:

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

• 嵌入
• 替换
• 隔离范围
• 编译/链接函数

如果 ui-views 是指令，显然它们的用法是不同的.协调这些模型没有意义吗?

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

推荐答案

如果你使用 Angular UI 路由器的内联视图来指向指令怎么样?

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

假设您有一个用于处理用户帐户 CRUD 操作的表的指令.我们会说该指令名为 user-admin.我们的路由文件看起来像:

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:

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

这会给你带来很多好处:

This would give you many nice things:

• 允许您拥有一个直接指向指令的网址
• 当一个状态只是一个指令时，消除了需要两个模板(视图模板和指令模板)的重复
• 允许您开始将更多控制器逻辑移动到指令中，为 Angular 2.0 做准备.请参阅此处和此处.

这篇关于Angular ui-router:ui-views vs 指令?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！