Question

我正在尝试在我的网站中使用AngularJS，但我遇到了以下问题。我已经看到了其他地方，但没有真正满足我的问题的答案。我试图从同一页面上的两个控制器访问数据，但似乎没有任何工作。我能够从一个控制器访问数据，并且我能够从另一个控制器访问数据，但不能同时访问同一页面上的数据。它们都是通过同一个应用程序访问的。

这是我的代码：

'use strict';

castitApp.config(function ($routeProvider, $httpProvider, $translateProvider, USER_ROLES) {
            $routeProvider
                .when('/post/', {
                    templateUrl: 'views/posts.html',
                    controller: 'PostController',
                    resolve:{
                        resolvedPost: ['Post', function (Post) {
                            return Post.query();
                        }]
                    },
                    access: {
                        authorizedRoles: [USER_ROLES.all]
                    }
                })
            $routeProvider
                .when('/views/main.html', {
                    templateUrl: '/views/main.html',
                    controller: 'PostController',
                    resolve:{
                        resolvedPost: ['Post', function (Post) {
                            return Post.query();
                        }]
                    },
                    access: {
                        authorizedRoles: [USER_ROLES.all]
                    }
                })
});

route_employee.js

castitApp.config(function ($routeProvider, $httpProvider, $translateProvider, USER_ROLES) {
        $routeProvider
            .when('/employees.html', {
                templateUrl: '/employee-place.html',
                controller: 'EmployeeController',
                resolve:{
                    resolvedEmployee: ['Employee', function (Employee) {
                        return Employee.get('stephen', 'name');
                    }]
                },
                access: {
                    authorizedRoles: [USER_ROLES.all]
                }
            })

        $routeProvider
            .when('/', {
                templateUrl: '/views/main.html',
                controller: 'EmployeeController',
                resolve:{
                    resolvedEmployee: ['Employee', function (Employee) {
                        return Employee.get('stephen', 'name');
                    }]
                },
                access: {
                    authorizedRoles: [USER_ROLES.all]
                }
            })
    });

main.html中

<tr ng-repeat="employee in employees">
   <td ng-click="get(employee.personnelNum, 'employeesof')">
{{employee.firstName}} {{employee.lastName}}
   </td>
</tr>
</table></center>   
<li class="animate-repeat" ng-repeat="post in posts">
    {{post.text}}
 </li>

还有另一个名为Employee的类，就其格式而言，与Post类基本相同，并且关键字已更改。我发现如果我更改javascript文件的导入顺序，它会改变哪个工作。此外，如果我更改 .when（'name'中的名称，那个名称将起作用，另一个将开始工作。似乎我不能使用两个控制器，而且我已经听说过指令可能是解决方法，但我对如何实际实现它非常不清楚。任何帮助表示赞赏！

Answer 1

我最终想出了答案。它确实必须做Gavin用ng-controller提到的，但我现在无法使用标签访问我的控制器。我知道这是正确的方向，但我不知道如何让我的特定情况发挥作用。

事实证明，我需要完全绕过路由器，而不是通过它们运行，并且据我所知，没有办法使用routeprovider将两个控制器路由到同一个URL。我没有像以前那样将已解析的变量传递给我的数据，而是直接从我的Employee对象调用服务查询。修复程序就像删除指向路由器中主URL的代码然后添加

一样简单

$scope.employees = Employee.get('stephen', 'name');

取代

$scope.employees = resolvedEmployee;

这解决了＆＃34;未知提供商＆＃34;我尝试使用ng-controller时收到的错误。最终，那些被证明是真正的问题。

Answer 2

你可以在路由定义上使用'controllerAs'来区分它们，如下所示：

castitApp.config(function ($routeProvider, $httpProvider, $translateProvider, USER_ROLES) {
        $routeProvider
            .when('/post/', {
                templateUrl: 'views/posts.html',
                controller: 'PostController',
                controllerAs: 'viewPost',
                resolve:{
                    resolvedPost: ['Post', function (Post) {
                        return Post.query();
                    }]
                },
                access: {
                    authorizedRoles: [USER_ROLES.all]
                }
            })
        $routeProvider
            .when('/views/main.html', {
                templateUrl: '/views/main.html',
                controller: 'PostController',
                controllerAs: 'mainPost',
                resolve:{
                    resolvedPost: ['Post', function (Post) {
                        return Post.query();
                    }]
                },
                access: {
                    authorizedRoles: [USER_ROLES.all]
                }
            })
});

并在视图中使用{{mainPost.something}}或{{viewPost.something}}

有关详细信息，请查看此https://docs.angularjs.org/api/ngRoute/provider/$routeProvider

多个控制器路由到同一页面AngularJS

2 个答案: