如何获取controllerAs值并在if条件中使用？附路由配置示例

嘿，我完全懂你的需求——同一个ChallengeCtrl控制器被两个不同路由使用，分别对应controllerAs: 'challenge'和controllerAs: 'participate'，你想在控制器内部根据这个别名执行不同的代码逻辑对吧？下面给你两种可行的方案：

方案1：直接通过$state获取当前路由的controllerAs值 #

AngularJS的$state服务可以获取当前激活路由的所有配置信息，包括我们设置的controllerAs属性。你只需要在控制器中注入$state，然后读取对应值做判断即可：

控制器代码示例 #

angular.module('yourApp').controller('ChallengeCtrl', ['$state', function($state) {
  // 获取当前路由的controllerAs别名
  const currentControllerAlias = $state.current.controllerAs;

  // 根据别名执行不同逻辑
  if (currentControllerAlias === 'challenge') {
    // 这里写challenge页面专属的代码
    console.log('执行挑战页面的逻辑');
    this.challengeSpecificData = '挑战页面专属数据';
  } else if (currentControllerAlias === 'participate') {
    // 这里写participate页面专属的代码
    console.log('执行参与页面的逻辑');
    this.participateSpecificData = '参与页面专属数据';
  }
}]);

方案2：通过路由自定义data属性（更健壮的方式） #

如果以后你想修改controllerAs的别名，但不想影响业务逻辑的判断，可以在路由配置中添加自定义的data属性，用更语义化的标识来区分页面场景：

修改路由配置 #

var challenge_page = { 
  name: "web.challenge-main.challenge-page", 
  parent: "web.challenge-main", 
  url: "/challenge-page/:challengeId", 
  templateUrl: baseUrl + "/web/challenge/challenge-page.html", 
  controller: 'ChallengeCtrl', 
  controllerAs: 'challenge',
  data: { pageContext: 'challenge' }, // 自定义场景标识
  redirectTo: "web.challenge-main.challenge-page.overview"
};

var participate = { 
  name: "web.challenge-main.challenge-page.participate", 
  parent: "web.challenge-main.challenge-page", 
  url: "/participate", 
  templateUrl: baseUrl + "/web/challenge/participate.html", 
  controller: 'ChallengeCtrl', 
  controllerAs: 'participate',
  data: { pageContext: 'participate' }, // 自定义场景标识
  title: 'Participate'
};

控制器中使用自定义标识 #

angular.module('yourApp').controller('ChallengeCtrl', ['$state', function($state) {
  // 获取自定义的页面场景标识
  const pageContext = $state.current.data.pageContext;

  // 根据场景执行逻辑
  if (pageContext === 'challenge') {
    // 挑战页面逻辑
    this.initChallengePage = function() {
      // 初始化挑战页面的操作
    };
    this.initChallengePage();
  } else if (pageContext === 'participate') {
    // 参与页面逻辑
    this.initParticipatePage = function() {
      // 初始化参与页面的操作
    };
    this.initParticipatePage();
  }
}]);

两种方案都能实现你的需求，方案2的优势在于把业务逻辑和控制器别名解耦，后续维护更灵活~

内容的提问来源于stack exchange，提问作者Suryansh.p