具有角度分量的动态嵌套视图

Question

我有一个带组件的angularjs应用程序，我想使用ui.router添加一个视图作为另一个视图的子视图。 老实说，我不认为ui.router完全支持组件，这可能发生在升级版本1.0中。 但同时我能做些什么来动态地使用显示视图？

这是我的$ stateProvider（我完成了我的尝试）

 $stateProvider
  .state('home', {
    url :'/home',
    template :'<home></home>'
  })
  .state('projects', {
    url:'/projects',
    template:   "<project-list></project-list>"
  })
  .state('projectDetails',{
    url:'/:projectId',
    template : '<project-detail projectDetails="projectDetails"></project-detail>'
   , views :{
      'chat':{
          template : '<chat></chat>'

      }
    }
  });
  $urlRouterProvider.otherwise('home');

我用这种方式创建了一个组件：

   (function() {
  'use strict';
function ChatController($scope, $element, $attrs, $firebaseArray) {
  var ctrl = this;


  console.log("it works");

}
angular.module('myapp').component('chat', {
  templateUrl: '/app/component/project/chat.html',
  controller: ChatController
});
})(window.angular);

然后我在projectDetails中添加了视图

<div ui-view="chat"></div>

Answer 1

我对您的要求的理解是，您有一个名为“聊天”的组件，您希望在状态“项目详细信息”中将其作为嵌套/子视图加载。 正如您已经观察到ui-router不支持这一点。

但这可以通过将“项目详细信息”作为父状态并将其他组件作为子状态加载来实现。

Plunker演示

angular.module('app', [
  'ui.router'
]).config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/');
  $stateProvider.state('home', {
    template: '<home></home>'
  }).state('home.parts', {
    url: '/',
    views: {
      'about-view@home': {
        template: "<about></about>"
      },
      'chat-view@home': {
        template: "<chat></chat>"
      }
    }
  });
}).component('app', {
  templateUrl: 'app.html'
}).component('home', {
  templateUrl: 'home.html',
  controller: homeController,
  controllerAs: 'vm'
}).component('about', {
  templateUrl: 'about.html',
  controller: aboutController,
  controllerAs: 'vm'
}).component('chat', {
  templateUrl: 'chat.html',
  controller: chatController,
  controllerAs: 'vm'
});

function chatController() {
  this.name = "chat";
}

function aboutController() {
  this.name = "about";
}

function homeController() {
  this.name = "home";
}

希望这是你想要的。请不要将url添加到父状态。考虑将其设置为抽象状态。