棱角分明的UI / UI路由器，我怎么用注入$ stateProvider局部视图？ [英] angular-ui/ui-router, how do I inject partial view using $stateProvider?

问题描述

我试图注入面板进行编辑，这取决于如果观众是主人​​，还是不行。现在，我有麻烦刚注射面板/局部视图到HTML。我想我的作文/视图/ view.html是'基地'的html页面，其中部分被注入。然后，局部视图是成分/视图/谐音/ views.tools.html。是否有人看到的东西错了我的$ stateProvider这可以解释为什么我不能注入我的部分进入我的views.html？

I am trying to inject a panel for editing, depending if the viewer is the owner, or not. Right now, I am having trouble just injecting the panel/partial view into the html. I want my compositions/views/view.html to be the 'base' html page, where the partial is injected in. Then the partial view is at compositions/views/partials/views.tools.html. Does anybody see something wrong with my $stateProvider that would explain why I cannot inject my partial into my views.html?

下面是我的$ stateProvider：

Here is my $stateProvider:

$stateProvider
        .state('all compositions', {
            url: '/compositions/recent',
            templateUrl: 'compositions/views/list.html'
        }). 
          state('view', {
                url: '/compositions/view/:compositionId',
                views: {
                'theTool':{
                 templateUrl:'compositions/views/partials/view.tool.html'   ,
                    controller: 'CompositionsController'
                }
                },
                templateUrl: 'compositions/views/view.html',
                controller: 'CompositionsController',

            }). //other states here

这是我的标记，对于我的view.html（主HTML）

this is my markup for my view.html (main html)

<div ui-view="theTool"></div>
<section data-ng-controller="CompositionsController" data-ng-init="findOne()">
    <h2>{{composition.title}}</h2>
    <div ng-bind-html="trustedContent"></div>
</section>

任何帮助或建议是大大AP preciated。谢谢

Any help or advice is greatly appreciated. Thanks

推荐答案

下面我创建了一个工作示例，这应该给所有的答案。

Here I created a working example, which should give all the answers.

调整后的状态确定指标是：

The adjusted state defintion is:

$stateProvider
  .state('allCompositions', {
    url: '/compositions/recent',
    templateUrl: 'compositions.views.list.html'
  }).

state('view', {
  url: '/compositions/view/:compositionId',
  views: {
    '': {
      templateUrl: 'compositions.views.view.html',
      controller: 'CompositionsController',
    },
    'theTool@view': {
      templateUrl: 'compositions.views.partials.view.tool.html',
      controller: 'CompositionsController'
    }
  },

最重要的是，该 compositions.views.view.html 目前发挥的作用靶点为的兄弟的视图 theTool 。两个视图都在相同的状态（观看）中定义，但它们中的一个注入到其他

the most important is, that the compositions.views.view.html is now playing the role of a target for the sibling view theTool. both views are defined on the same state ('view') but one of them is injected into the other.

另外，在index.html的我做了这个变化：

Also in the index.html I did this change:

<!--<div ui-view="theTool"></div>-->
<div ui-view=""></div>

所以现在我们所拥有的的未命名的用户界面视图，而不是命名。这就是为什么这两个州

so now we do have unnamed ui-view instead of the named. That's why both states

• allCompostions


• 查看

哪些目标未命名视图现在正确呈现。含硒较多的在这里这个例如

which target unnamed view '' are now properly rendered. Se more here in this example

更多关于视图插入逻辑：

More about the the view insertion logic:

• View名称 - 相对与绝对名称

• View Names - Relative vs. Absolute Names

小举：

在幕后，每一个观点被分配遵循的方案绝对名称 视图名@ Statename的 ，其中视图名是所使用的名称view指令和国家名称是国家的绝对名称，例如： contact.item。您也可以选择在绝对语法来写你的视图名称。

Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.

从同一来源真棒示例：

.state('contacts.detail', {
  views: {
    ////////////////////////////////////
    // Relative Targeting             //
    // Targets parent state ui-view's //
    ////////////////////////////////////

    // Relatively targets the 'detail' view in this state's parent state, 'contacts'.
    // <div ui-view='detail'/> within contacts.html
    "detail" : { },            

    // Relatively targets the unnamed view in this state's parent state, 'contacts'.
    // <div ui-view/> within contacts.html
    "" : { }, 

    ///////////////////////////////////////////////////////
    // Absolute Targeting using '@'                      //
    // Targets any view within this state or an ancestor //
    ///////////////////////////////////////////////////////

    // Absolutely targets the 'info' view in this state, 'contacts.detail'.
    // <div ui-view='info'/> within contacts.detail.html
    "[e-mail]" : { }

    // Absolutely targets the 'detail' view in the 'contacts' state.
    // <div ui-view='detail'/> within contacts.html
    "detail@contacts" : { }

    // Absolutely targets the unnamed view in parent 'contacts' state.
    // <div ui-view/> within contacts.html
    "@contacts" : { }

这篇关于棱角分明的UI / UI路由器，我怎么用注入$ stateProvider局部视图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！