不能使用带有 ui-router AngularJS 的视图使用不同的控制器

Posted 2023-03-07

【中文标题】不能使用带有 ui-router AngularJS 的视图使用不同的控制器

【英文标题】：cannot use a different controller with a view with ui-router AngularJS

【发布时间】：2015-08-03 19:09:59

【问题描述】：

我正在使用 ui-router 来路由我的 Angular 应用程序。我有以下路线：

'use strict';

//Setting up route
angular.module('admins').config(['$stateProvider', 
    function($stateProvider) 
        // Admins state routing
        $stateProvider.
        state('admin_home', 
            url: '/admin',
            templateUrl: 'modules/admins/views/list-admins.client.view.html'
        ).
        state('adduser', 
            url: '/admin/create',
            templateUrl: 'modules/admins/views/create-admin.client.view.html', 
        ).
        state('viewAdmin', 
            url: '/admins/:adminId',
            templateUrl: 'modules/admins/views/view-admin.client.view.html'
        ).
        state('editAdmin', 
            url: '/admins/:adminId/edit',
            templateUrl: 'modules/admins/views/edit-admin.client.view.html'
        );
    
]);

这是在我的“管理”模块中，它有自己的控制器 (AdminsController)。

但是，我希望能够从这里创建一个新用户，执行此操作的控制器称为“AuthenticationController”，位于结构的其他位置。

据我所知，我应该可以这样写：

state('adduser', 
                url: '/admin/create',
                templateUrl: 'modules/admins/views/create-admin.client.view.html',
                controller:'AuthenticationController'

            )

它应该可以工作。

但是 - 我不断被重定向回索引页面。

我怀疑这可能是因为我使用的是 HTML5 并且在我的配置中也有这个：

// use HTML 5
         $locationProvider.html5Mode(true).hashPrefix('!');
            //Sets the HTTP header type for the redirects
           $httpProvider.defaults.headers.common = 
            'Accept': 'application/json', 
            'Content-Type': 'application/json'

谁能帮忙？

【问题讨论】：

假设您尝试直接加载/admin/create，您是否为 HTML5 模式设置了必要的服务器端 URL 重写？见github.com/angular-ui/ui-router/wiki/…

【参考方案1】：

你应该添加：

$urlRouterProvider.otherwise("/home");

然后在你的状态函数中（不是在你的视图文件中）声明你的控制器：

 state('viewAdmin', 
        url: '/admins/:adminId',
        controller : AdminsController,
        templateUrl: 'modules/admins/views/view-admin.client.view.html'
 )

如果不起作用，请尝试删除：

 $locationProvider.html5Mode(true).hashPrefix('!');
            //Sets the HTTP header type for the redirects
 $httpProvider.defaults.headers.common = 
     'Accept': 'application/json', 
     'Content-Type': 'application/json'

让我知道；）