角UI路由器：UI的观点VS指令？ [英] Angular ui-router: ui-views vs directives?

问题描述

UI路由器允许的多重嵌套的意见的。这些可互换的观点的作用似乎重叠指令的作用。

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

什么优点/缺点使用（多个嵌套） 用户界面视图取值 VS角的指令 ？

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

美国和路由2个不同的功能。国家允许您换出partial.html模板及其控制器，以及可以(optionally?)指定相应的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.

在蒂姆金德贝格（A UI路由器 DEV）的电子邮件回复：

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

用户界面视图是一个指令，所以如果你使用它，你使用的是指令
  已对工作特别是与的其余部分很好地工作
  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视图指令

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

奖金的问题：

角指令功能提供给意见？如：

• Transclude


• 替换


• 隔离作用域


• 编译/连接功能

如果UI的观点指令，它似乎很清楚它们的用法是不同的。那岂不是有意义的协调这些模式？

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

推荐答案

一些思考/信件后，这是我的结论是：

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

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.

当您创建 $ stateProvider.state（...）定义，你指定在发生什么这些容器：

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

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

您可以使用所有传统的指令功能（transclude，更换，隔离作用域，编译/连接功能）与UI的看法？我不确定。例如：

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:

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

---

在最后，好像每个选项都有其权衡。指令有一些额外的功能，但UI的看法是可以互换的，可以有相关的路由。

---

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路由器：UI的观点VS指令？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！