AngularJS - 如何从ui-router引用子模块控制器

AngularJS - How to refer to a submodule controller from ui-router?

本文关键字:引用 模块 控制器 ui-router AngularJS      更新时间:2023-09-26

我在 Angular 1.3.9 应用程序中使用子模块有点挣扎。我在 http://plnkr.co/edit/XBfTPAGRRe0CWJgjGJzc?p=preview 有一个(不工作,对不起)预览,我认为它吓坏了,部分原因是因为我正在使用 Restangular。

我有以下几点:

angular
    .module('estimate', ['ui.router', 'restangular', 'estimate.project'])
;
angular
.module('estimate.project', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider'
        , function($stateProvider, $urlRouterProvider, $locationProvider) {
    $stateProvider
       .state('project', {
            url: "/project/{id:int}",
            abstract: true,
            templateUrl: '/app/templates/project.html',
            controller: "ProjectController as project", 
            resolve: { // stuff }
        })
        .state('project.overview', {
            url: "",
            templateUrl: "/app/templates/overview.html"
        })
        // ...
    ;
}])
.controller('ProjectController', ['$scope', 'ProjectService', 'myProject'
          , function($scope, ProjectService, myProject) {
    console.log('i made it!');
}]);

在我的模板中,从estimate模块提供,我有:

<li><a ui-sref="project.overview({ id: 1 })">One</a></li>

URL 在页面上正确解析,但单击它不会执行任何操作。它甚至不会抛出任何控制台错误 - 它只是坐在那里。我的直觉告诉我,这与我如何引用控制器和/或路由有关,以及是否需要为它们添加前缀或修改以与子模块一起使用。关于如何使其正确加载的任何想法?

如果这篇文章太散漫,请告诉我,我会尝试清理它。

我在这里更新了您的 plunker,并会说,最重要的更改是 - 引用模块中的子模块

取而代之的是:

angular
    .module('estimate', ['ui.router', 'restangular'])
    ...
angular
    .module('estimate.project', ['ui.router'])
    ...

我们必须使用它,即在父模块中引用子模块

angular
    .module('estimate', ['ui.router', 'restangular', 'estimate.project'])
    ...
angular
    .module('estimate.project', ['ui.router'])
    ...

通过一些其他一些小的调整,这应该是方法。检查它在这里工作