javascript - Angular 路线不触发 Controller

Question

我在获取要执行的路由的 Controller 时遇到问题。

基本上，我按如下方式注册我的路线:

var App = angular.module('App', ['ngRoute', 'routesControllers']);

App.config(['$routeProvider',
function($routeProvider) {
    $routeProvider.
        when('/', {
            template: " ",
            controller: 'NewOrderCtrl'
        }).
        when('/:companyName/:orderNumber', {
            template: " ",
            controller: 'ViewOrderCtrl'
        }).
        otherwise({
            redirectTo: '/'
        });
}]);

在这里，我没有在模板中定义任何内容，因为我使用我的路由来触发 ajax GET。

我的 Controller 如下:

var routesControllers = angular.module('routesControllers', []);

routesControllers.controller('NewOrderCtrl', ['OrderManagerFactory', function(OrderManagerFactory) {

  alert('NewOrderCtrl fired!');

  //create a new empty company and order
  OrderManagerFactory.createNewCompany();
  OrderManagerFactory.createNewOrder();

}]);

routesControllers.controller('ViewOrderCtrl', ['OrderManagerFactory', '$routeParams', function(OrderManagerFactory, $routeParams) {

  alert('ViewOrderCtrl fired!');

  //Fire a bunch of ajax calls using the data from $routeParams

}]);

我还为空 View 放置了一个 div:

<div ng-view ng-controller="ViewOrderCtrl"></div>

例如，当我访问 #/tesla/x123x 时，我什么也得不到。任一 Controller 中的 alert() 不执行...

有人可以帮忙吗？我错过了什么？

Answer 1

您可以改用 resolve 而不是尝试使用 controller ...在某种程度上，它并不是您真正拥有的 Controller 。

resolve - {Object.=} - An optional map of dependencies which should be injected into the controller. If any of these dependencies are promises, the router will wait for them all to be resolved or one to be rejected before the controller is instantiated. https://docs.angularjs.org/api/ngRoute/provider/$routeProvider

所以像这样:

 $routeProvider.when('/', { resolve: { init: 'NewOrderService' } });

并将 Controller 更改为工厂或服务:

routesControllers.service('NewOrderService', ['OrderManagerFactory', function(OrderManagerFactory) {

  alert('NewOrderService fired!');

  //create a new empty company and order
  OrderManagerFactory.createNewCompany();
  OrderManagerFactory.createNewOrder();

}]);

编辑

如果路由有一些参数，可以通过$routeParams 访问这些参数。

让工厂/服务依赖于 $routeParams 不是可重用的模式，因此更新 resolve 属性以使用函数将有所帮助:

再次来自文档:

Be aware that ngRoute.$routeParams will still refer to the previous route within these resolve functions. Use $route.current.params to access the new route parameters, instead