如何为每个Angular UI路由器状态设置不同的控制器

How to set a different controller for each Angular UI Router state

本文关键字：设置 状态 控制器 路由器 UI Angular      更新时间：2023-09-26

我正在尝试创建一个Angular UI Router状态，为每个状态指定一个控制器。例如，我教英语、设计、数学和其他一些课程，我想显示一个基于主题的模板。我有适当的模板加载正确，但我的考试控制器变得有点大。我想为每个主题分离一些逻辑，但不确定实现这一目标的最佳/标准方法是什么。我可能想多了。以下是我到目前为止所做的，如果有人有时间看一看，并提供一些指导，那将是伟大的。

.state('exam', {
url: '/exam',
abstract: true,
views: {
  '':{
    templateUrl: 'app/state-exam/exam.html',
    controller: 'ExamController',
    controllerAs: 'examController',
  },
  'exam-pagination@exam':{
    templateUrl: 'app/state-exam/exam-pagination.html'
  },
 }
})
.state('exam.subject', {
 url: '/:subject',
 // here I would like to set a controller and controller as
 // based on the subject
 views: {
  'exam-detail@exam' : {
    templateUrl: function($stateParams){
      return 'app/state-exam/exam-' + $stateParams.subject + '.html';
    }
  }
 }
});

如果我做了这样的事情，它会被认为是不好的做法还是完全错误的?

.state('exam', {
url: '/exam',
abstract: true,
views: {
  '':{
    templateUrl: 'app/state-exam/exam.html',
    controller: 'ExamController',
    controllerAs: 'examController',
  },
  'exam-pagination@exam':{
    templateUrl: 'app/state-exam/exam-pagination.html'
  },
  controller: function($stateParams){
     switch ($stateParams.subject) {
            case 'math':
              return 'ExamMathController'
              break;
             case 'english':
              return 'ExamEnglishController'
              break;
          }
     }
 }
})
.state('exam.subject', {
 url: '/:subject',
 views: {
  'exam-detail@exam' : {
    templateUrl: function($stateParams){
      return 'app/state-exam/exam-' + $stateParams.subject + '.html';
    }
  }
 }
});

您可以查看参数并根据需要执行任务。

.state('exam.subject', {
 url: '/:subject',
controller:'subjectCtrl',
 // here I would like to set a controller and controller as
 // based on the subject
 views: {
  'exam-detail@exam' : {
    templateUrl: function($stateParams){
      return 'app/state-exam/exam-' + $stateParams.subject + '.html';
    }
  }
 }
});

和in控制器

 .controller('subjectCtrl',['$scope','$state','$stateParams',function($scope,$state,$stateParams){
  switch($stateParams.subject){
   case 'English':
  //Task for english subject
break;
case 'Nepali':
//Task for nepali subject
break;
}
}]);
相关文章：