Angular ui 路线没有激活控制器

Question

在下面查看

<div ng-repeat="make in makes | orderBy: 'name'">
  <a ui-sref="modal.models({make: make._id})">
    <li>{{make.name}}</li>
  </a>
</div>

我点击 li，我应该将 _id 发送到 ModelsModalController。不幸的是，即使当我单击 li 元素时浏览器中的 url 正确显示，也不会调用控制器

(function() {
  'use strict';

  angular
    .module('App.modal', [
      'App.modal.controllers',
    ])
    .config(function($stateProvider, $urlRouterProvider) {
      $stateProvider
        .state('modal', {
          url: '/modal',
          templateUrl: 'modules/modal/partials/modal.html',
          controller: 'MakesModalController'
        })
        .state('modal.models', {
          url: '/models?make',
          templateUrl: 'modules/modal/partials/modal.models.html',
          controller: 'ModelsModalController'
        });
    });
})();

在浏览器中它看起来像 #/modal/models?make=id_number 但控制器没有被调用

这是我的控制器

(function() {
  'use strict';

  angular
    .module('App.modal.controllers', [])
    .controller('MakesModalController', ['$scope', 'Makes', function($scope, Makes) {
      Makes.get(function success(response) {
          $scope.makes = response;
        },
        function error(errorResponse) {
          console.log('Error:' + JSON.stringify(errorResponse));
        });
    }])
    .controller('ModelsModalController', ['$scope', '$stateParams', function($stateParams, $scope) {
      console.log('hello');
    }]);
})();

Answer 1

将控制器的声明更改为 .module('App.modal.controllers') 去掉 [].

你应该在状态声明中尝试这个url: '/models?:make'

Answer 2

因为您的视图是嵌套的，所以您需要指定子状态视图应该插入到父状态视图的哪个位置。

根据您在问题中提供的代码，您的父状态视图看起来像

<div ng-repeat="make in makes | orderBy: 'name'">
  <a ui-sref="modal.models({make: make._id})">
    <li>{{make.name}}</li>
  </a>
</div>

那个视图里面没有 ui-view 并且 ui-router 不知道你想让子视图去哪里......所以它不会渲染它，因此你的控制器从未被调用。

尝试在父视图的某处添加ui-view

<ui-view />
<div ng-repeat="make in makes | orderBy: 'name'">
  <a ui-sref="modal.models({make: make._id})">
    <li>{{make.name}}</li>
  </a>
</div>

或不嵌套状态。

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('modal', {
      url: '/modal',
      templateUrl: 'modules/modal/partials/modal.html',
      controller: 'MakesModalController'
    })
    .state('models', {
      url: '/models?make',
      templateUrl: 'modules/modal/partials/modal.models.html',
      controller: 'ModelsModalController'
    });
});

（并在需要时将引用从 modal.models 更新为 models）

Angular ui 路线没有激活控制器

Angular ui route doesn't activate the controller

javascript

angularjs

angular-ui-router