angularjs 没有链接的路由

Question

我有两个问题。
首先，我的 test.html 没有 "see" 他控制器中的产品数组。
不知道为什么，我把控制器和routing.config.js里的html连上了。

var myapp = angular.module('myapp', ["ui.router", "ngAnimate"]);

myapp.config(function($stateProvider, $urlRouterProvider){    
  $stateProvider
      .state("foo", {
          url: "/foo",
          templateUrl:'start.html'
      })
      .state("test", {
          url: "/test",
          templateUrl: 'test.html',
          controller:'product-controller',
          parent:'foo'
      })

  $urlRouterProvider.otherwise("/foo");
})

myapp.controller('navCtrl', function($scope, $state){

  $scope.navigateTo = function(target){
     $state.go(target);
  }
});

我想要的第二件事是 test.html 将被激活 而无需 单击 link。
如果主页已加载，test.html 也应加载。
最后我想删除 <ul> 但结果应该是一样的。（foo 和下拉菜单）。

我做了一个PLUNK你可以看到问题的地方。

我唯一的解决方案是将 test.controller.js 整合到 routing.config.js 中，将 test.html 整合到 start.html 中。
但我希望避免这种情况，因为它会使代码更加混乱。

我也查看了 ui-router 文档，但它对我不起作用。

    .state("foo.test", {
          url: "/test",
          templateUrl: 'test.html',
          controller:'product-controller',
          parent:'foo'
      })

我希望有人有想法...谢谢！ =)

Answer 1

我会采纳@charlietfl 的建议并阅读嵌套视图。除此之外，您的 plunkr 中还有一些错误：

忘记在 index.html

test-controller.js

忘记将 product-selection 模块注入 myapp（因此它可以解析相应的控制器）
忘记将 ngModel 添加到 test.html 中的 select 元素以使数据绑定按预期工作

这是您的 plunkr 更新，select 控件已正确填充。

angularjs 没有链接的路由

angularjs routing without links

html

angularjs

angularjs-routing