javascript - ng-route 读取链接并找到具有相同名称的特定 Controller

Question

我正在使用ng-click和ng-view路由我的div id= "listings"显示不同类型的移动列表，例如 iphone 4 , iphone 5 , nexus 4 , nexus 5 , nexus 6 , lg g3等等

这是我的 Plunkr .

<div ng-repeat = 'breakdown in selected.breakdowns' ng-href = '#{{breakdown}}'>

  {{breakdown}}

</div>

在我的routeProvider中:

.when('/', {
    controller  : 'home-ctrl',
})
.when('/nexus_4, {
    controller : 'nexus_4-ctrl',
    templateUrl : 'listings.html',
})

等等。但这似乎很乏味。有没有办法让应用程序读取 URL，例如 mywebsite.com/nexus_5，而不是单独为每个操作执行此操作。 ，然后搜索名为 nexus_5-ctrl 的 Controller 文件？

谢谢!

Answer 1

据我所知，他们没有任何方法可以将动态 Controller 绑定(bind)到任何路由。您必须为每个可能的状态创建路线。是的，您可以动态加载 Controller 文件，或者使用 Lazy load 按需加载。 。我在我的项目中使用了相同的东西，并且它对我来说工作得很好。

这是我的代码片段，我是如何做到这一点的。

 resolve : {
        loadSummerNote:function($ocLazyLoad){
             return $ocLazyLoad.load({
                   name:"summernote",   
                   files: ['/bower_components/summernote/dist/summernote.css','/bower_components/angular-summernote/dist/angular-summernote.min.js','/bower_components/summernote/dist/summernote.min.js']
                })
        },
      loadUploadFile:function($ocLazyLoad,loadSummerNote){
           return $ocLazyLoad.load({
                  name: 'ngFileUpload',
                  files: ['/bower_components/ng-file-upload/ng-file-upload-shim.min.js','/bower_components/ng-file-upload/ng-file-upload.min.js']
              })
      }, 
      currentDomain : function (Domain, $stateParams,loadUploadFile,User){
        return Domain.getDomain();
      }
     },
     controller : "domain"

在解析 block 中加载所有必需的文件，因此必须在加载 Controller 之前加载所有依赖项。

另一个解决方案是使用 Angular UI-ROUTER 。 ui-router 支持单个状态下的多个 View 。因此无需为每种可能的情况创建状态。只需为主题创建 View 。