Question

我正在尝试注入一个面板进行编辑，具体取决于观看者是否为所有者。现在，我只是将面板/局部视图注入到html中时遇到了麻烦。我希望我的作品/ views / view.html成为＆＃39;基础＆＃39; html页面，其中注入了partial。然后局部视图位于composition / views / partials / views.tools.html。有没有人看到我的$ stateProvider有问题可以解释为什么我不能将我的部分注入我的views.html？

这是我的$ 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）

的标记

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

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

Answer 1

在这里，我创建了一个working example，它应该提供所有答案。

调整后的州定义是：

$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的目标角色。两个视图都定义在相同的状态（＆＃39;视图＆＃39;），但其中一个被注入另一个。

同样在index.html中我做了这个改变：

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

现在我们确实有 未命名的 ui-view而不是named。这就是两个州的原因

allCompostions
视图

定位未命名的视图＆＃39;＆＃39;现在正确呈现。在此example

中查看更多内容

有关视图插入逻辑的更多信息：

View Names - Relative vs. Absolute Names

小引用：

在幕后，为每个视图分配一个遵循 viewname@statename 方案的绝对名称，其中viewname是视图指令中使用的名称，状态名称是状态＆＃39 ; s绝对名称，例如contact.item。您还可以选择以绝对语法编写视图名称。

来自同一来源的令人敬畏的例子：

.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
    "info@contacts.detail" : { }

    // 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注入局部视图？

1 个答案: