javascript - 如何知道谁调用了控制器

Question

我有一个文件，其中包含用于不同目的的不同类型的代码。我希望在 controllerAs 具有特定值时调用它们。我尝试了许多以前的答案，但其中大多数是针对控制器的，但我想知道 controllerAs 的值。那么我如何知道 controllerAs 的值以及如何在 if 条件下使用它？

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',
        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',
        title: 'Participate',
    };

在上面的代码块中，我有两页指令文件。它调用同一个控制器。

标签： javascriptjqueryangularjs

Answer 1

$state.current将为您提供当前状态信息。您可以使用$state.current.nameor$state.current.title或any unique attribute specific to the state...来识别控制器内的当前页面。

angular.module('app', ['ui.router'])
  .config(function($stateProvider, $urlRouterProvider) {
  
    const challenge_page = {
      name: "challenge-page",
      url: "/challenge-page/:challengeId",
      templateUrl: "/web/challenge/challenge-page.html",
      controller: 'ChallengeCtrl',
      controllerAs: 'challenge',
      title: 'Challenge'
    };

    const participate = {
      name: "participate",
      parent: "challenge-page",
      url: "/participate",
      templateUrl: "/web/challenge/participate.html",
      controller: 'ChallengeCtrl',
      controllerAs: 'participate',
      title: 'Participate'
    };

    $urlRouterProvider.otherwise('/challenge-page/1');

    $stateProvider
    .state(challenge_page)
   	.state(participate);
  })
  .run(function($templateCache) {
  	$templateCache.put("/web/challenge/challenge-page.html", `
    	<h1>ChallengePage</h1> 
    	<ul>
      	<li><strong>State Name: </strong>{{challenge.currentState.name}}</li>
       	<li><strong>Title: </strong>{{challenge.currentState.title}}</li>
      </ul>
      <hr />
    	<blockquote>
      	<ui-view></ui-view>
      </blockquote>
    `);
  	$templateCache.put("/web/challenge/participate.html", `
    	<h1>Participate</h1> 
    	<ul>
      	<li><strong>State Name: </strong>{{participate.currentState.name}}</li>
       	<li><strong>Title: </strong>{{participate.currentState.title}}</li>
      </ul>
    `);
    })
  .controller('ChallengeCtrl', function($state) {
  	this.currentState = $state.current;
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.24/angular-ui-router.min.js"></script>
<div ng-app="app">
  <a ui-sref="challenge-page({challengeId: 1})" ui-sref-active="active">Challenge</a>
  <a ui-sref="participate" ui-sref-active="active">Participage</a>

  <ui-view></ui-view>
</div>