angular-ui/ui-router，如何使用 $stateProvider 注入局部视图? [英] angular-ui/ui-router, how do I inject partial view using $stateProvider?

问题描述

我正在尝试注入一个面板进行编辑，具体取决于查看者是否是所有者.现在，我在将面板/部分视图注入 html 时遇到了麻烦.我希望我的 composition/views/view.html 成为基本"html 页面，其中部分被注入.然后部分视图位于 composition/views/partials/views.tools.html.有没有人看到我的 $stateProvider 有问题，这可以解释为什么我不能将我的部分注入到我的 views.html 中?

这是我的 $stateProvider:

$stateProvider.state('所有作品', {url: '/compositions/recent',templateUrl: 'compositions/views/list.html'}).状态('视图'，{url: '/compositions/view/:compositionId',意见:{'工具':{templateUrl:'compositions/views/partials/view.tool.html' ,控制器:'组合控制器'}},templateUrl: 'compositions/views/view.html',控制器:'组合控制器'，}).//这里的其他状态

这是我的 view.html(主 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></节>

非常感谢任何帮助或建议.谢谢

解决方案

这里我创建了一个 工作示例，它应该给出所有的答案.

调整后的状态定义为:

$stateProvider.state('allCompositions', {url: '/compositions/recent',templateUrl: 'compositions.views.list.html'}).状态('视图'，{url: '/compositions/view/:compositionId',意见:{'':{templateUrl: 'compositions.views.view.html',控制器:'组合控制器'，},'theTool@view':{templateUrl: 'compositions.views.partials.view.tool.html',控制器:'组合控制器'}},

最重要的是，compositions.views.view.html 现在扮演着 sibling 视图的目标角色theTool.两个视图都定义在相同的状态(视图")上，但其中一个被注入到另一个中.

也在 index.html 中我做了这个改变:

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

所以现在我们有 unnamed ui-view 而不是命名的.这就是为什么两个状态

• 所有组合
• 查看

目标未命名视图 '' 现在已正确呈现.在此示例

中了解更多信息

更多关于视图插入逻辑:

• 查看名称 - 相对名称与绝对名称

小引用:

<块引用>

在幕后，每个视图都被分配一个绝对名称，遵循 viewname@statename 方案，其中 viewname 是视图指令和状态名称中使用的名称是状态的绝对名称，例如联系方式.您还可以选择以绝对语法编写视图名称.

来自同一来源的很棒的例子:

.state('contacts.detail', {意见:{///////////////////////////////////////相对定位////以父状态 ui-view 为目标/////////////////////////////////////////相对地针对此状态的父状态联系人"中的详细信息"视图.//<div ui-view='detail'/>在contacts.html中细节" : { }，//相对地指向此状态的父状态中的未命名视图，'contacts'.//
在contacts.html中"" : { },////////////////////////////////////////////////////////使用@"的绝对定位////定位此状态内的任何视图或祖先//////////////////////////////////////////////////////////绝对针对此状态下的 'info' 视图，'contacts.detail'.//<div ui-view='info'/>在contacts.detail.html 中[e-mail]":{}//绝对以联系人"状态下的详细信息"视图为目标.//<div ui-view='detail'/>在contacts.html中详细@联系人":{}//绝对以父联系人"状态的未命名视图为目标.//
在contacts.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?

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

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>

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

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.

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
• view

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

More about the the view insertion logic:

• View Names - Relative vs. Absolute Names

small cite:

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.

Awesome examples from the same source:

.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" : { }

这篇关于angular-ui/ui-router，如何使用 $stateProvider 注入局部视图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！