Question

我有一个名为person的组件。在person组件中，我有一系列选项卡 - 每个选项卡的内容通过链接到组件的状态在ui视图中呈现。其中一个标签包含注释。我创建了一个notes组件，它具有用于标准主 - 详细信息组件（列表，添加，查看，编辑）的子状态的ui视图。我还有另一个名为Project的组件。在项目组件中，我还需要注释，因此希望能够重用相同的注释组件。如何在notes状态中动态设置父级，以便我可以在相关组件（人员或项目）的选项卡中呈现它。我确实通过在函数中使用$ stateParams来设置父级（并显示）来动态设置父级在笔记顶级状态，但笔记状态的子状态不显示，所以我需要知道如何把它传播下来。我确信它很简单，但我已经尝试了一百万种组合而无法正确使用它。请参阅下面的nacNote组件模板 - 列表链接不执行任何操作。以及这两个州的国家配置。

var noteTemplate = `
    <h3>
        Notes
        <nac-link-button text="" glyph="circle-plus" on-click="$ctrl.add();"></nac-link-button>
    </h3>
    <a ui-sref="note_list">List</a> //link doesn't work
    <ui-view></ui-view>
`;
var stateNote = {
  name: 'note_admin',
  url: '/note',
  parent: function ($stateParams) { return $stateParams.parent;},
  component: 'nacNote'
};
var stateNoteList = {
  name: 'note_list',
  parent: 'note_admin',
  component: 'nacNoteList',    
};
angular
  .module('nacNote', ['nacForm'])
  .service('nacNoteService', NoteService)
  .config(function ($stateProvider) {
    $stateProvider
        .state(stateNote)
        .state(stateNoteList)
    ;

  })
  .component('nacNote', note)
  .component('nacNoteList', noteList)

相关人员模板和状态配置 - 这可行

var personNoteTemplate = `
    <div>Person Note</div>
    <nac-note parent="person_note"></nac-note>
`;

 .state('person_note', {
            parent: 'person_view',
            url: '/note',
            component: 'nacPersonNote'
        })

在多个父级中重新使用具有嵌套状态的组件angularjs ui-router

0 个答案: