Javascript 具有角度组件的动态嵌套视图

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

这是我的$stateProvider（我已经尝试过了）

然后我在projectDetails中添加了视图

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

---

我对您的需求的理解是，您有一个名为“Chat”的组件，希望将其作为嵌套/子视图加载到状态“project details”中。 正如您已经观察到的，ui路由器不支持这一点

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

angular.module（'app'[
“ui.router”
]).config（函数（$stateProvider，$urlRouterProvider）{
$urlRouterProvider。否则（'/'）；
$stateProvider.state（'home'{
模板：“”
}).state（“home.parts”{
url:“/”，
观点：{
”“关于-view@home': {
模板：“”
},
“聊天-view@home': {
模板：“”
}
}
});
}).component（'app'{
templateUrl:'app.html'
}).组件（'主'{
templateUrl:'home.html'，
控制器：homeController，
controllerAs:'vm'
}).component（'about'{
templateUrl:'about.html'，
控制器：关于控制器，
controllerAs:'vm'
}).component（'chat'{
templateUrl:'chat.html'，
控制员：聊天室控制员，
controllerAs:'vm'
});
函数控制器（）{
this.name=“chat”；
}
关于控制器（）的函数{
this.name=“about”；
}
函数homeController（）{
this.name=“home”；
}

---

希望这是你想要的。请不要把URL添加到父状态。考虑把它变成一个抽象状态。

< P>我对你的需求的理解是你有一个称为“聊天”的组件，你想把它作为一个嵌套/子视图加载在状态“项目细节”中。 正如您已经观察到的，ui路由器不支持这一点

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

angular.module（'app'[
“ui.router”
]).config（函数（$stateProvider，$urlRouterProvider）{
$urlRouterProvider。否则（'/'）；
$stateProvider.state（'home'{
模板：“”
}).state（“home.parts”{
url:“/”，
观点：{
”“关于-view@home': {
模板：“”
},
“聊天-view@home': {
模板：“”
}
}
});
}).component（'app'{
templateUrl:'app.html'
}).组件（'主'{
templateUrl:'home.html'，
控制器：homeController，
controllerAs:'vm'
}).component（'about'{
templateUrl:'about.html'，
控制器：关于控制器，
controllerAs:'vm'
}).component（'chat'{
templateUrl:'chat.html'，
控制员：聊天室控制员，
controllerAs:'vm'
});
函数控制器（）{
this.name=“chat”；
}
关于控制器（）的函数{
this.name=“about”；
}
函数homeController（）{
this.name=“home”；
}

---

希望这是你想要的。请不要将URL添加到父状态。考虑将其抽象化。

UI路由器有嵌套状态。你考虑使用它们吗？OP清楚地表示，他不知道UI路由器是否支持组件。但我可以验证ngRoute是否有效。我已经尝试使用ui.router文档，但不起作用。定义一个子状态，将ui视图标记放在需要的位置，并添加$state.go（'substate'）@David我在回答中提到的解决方案是否达到了您的要求？ui路由器具有嵌套状态。您考虑过使用它们吗？OP明确表示，他不知道ui路由器是否支持组件。但我可以验证ngRoute是否有效。我已经尝试使用ui.router文档，但不起作用。定义一个子状态，将ui视图标记放在需要的地方，并添加$state.go（'substate'）@David我在回答中提到的解决方案实现了您的期望吗？

   (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);

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

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";
}