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

因为您的视图是嵌套的，所以您需要具体应将子状态视图插入父状态视图的位置。

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

<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>

OR 不嵌套状态。

.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的参考资料）

Answer 2

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

你应该在州宣言中试试这个url: '/models?:make'

Angular ui route不会激活控制器

2 个答案: