AngularJs：ui-router *需要*我将 $scope 注入我的控制器（即使使用 Controller As 语法）？答案

【问题标题】：AngularJs : does ui-router *require* me to inject $scope into my controller (even with Controller As syntax)?AngularJs：ui-router *需要*我将 $scope 注入我的控制器（即使使用 Controller As 语法）？
【发布时间】：2020-02-25 07:46:50
【问题描述】：

“Controller As”语法的优点之一是它使我们从 $scope 中解放出来。

但是，我遇到的问题似乎表明 ui-router 需要 $scope - 可能是为了访问该状态。

有多个类似的问题，没有一个令人满意的答案，所以我正在寻找一个规范的答案，我可以参考其他问题。

ui-router需要我是否将$scope 注入我的控制器，即使控制器代码从未引用$scope（因为我正在使用“控制器作为”语法）？（Angular ui router controlleras syntax not working 的答案似乎暗示确实如此。此外，将 $scope 注入 this working Plunker 会破坏它）
我可以避免这种情况吗（可能通过告诉我的ui-router 配置从“controller as”声明的控制器获取状态）？

【问题讨论】：

标签： angularjs angular-ui-router

【解决方案1】：

也许下面的代码可能有用。

var myApp = angular.module('helloworld', ['ui.router'])
.config(function($stateProvider) {
  var helloState = {
    name: 'hello',
    url: '/hello',
    template: '<h3>hello world!</h3>'
  }
  
  class AboutStateController {
    constructor() {
      this.name = 'John Dow';
    }
  }
 
  var aboutState = {
    name: 'about',
    url: '/about',
    template: '<h3>Hello <span>{{aboutStateController.name}}</span></h3>',
    controller: AboutStateController,
    controllerAs: 'aboutStateController'
  }

  $stateProvider.state(helloState);
  $stateProvider.state(aboutState);
});

angular.bootstrap(document.body, ['helloworld']);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="//unpkg.com/@uirouter/angularjs/release/angular-ui-router.min.js"></script>

    <a ui-sref="hello" ui-sref-active="active">Hello</a>
    <a ui-sref="about" ui-sref-active="active">About</a>

    <ui-view></ui-view>

【讨论】：

这是一个很好的答案！谢谢你。您已经证明没有必要将 $scope 注入控制器以使 ui-router 工作。我想给你这样一个好答案的额外 100 分 - 但系统不会再让我这样做 2 天（给其他人时间回答）。如果我忘记了，请在此处发表评论以提示我 ;-)

【解决方案2】：

不，UI-Router 在其控制器中不需要 $scope：

myapp.controller('MicrositeController', ['$state', '$mdMedia', '$mdSidenav',
 function($state, $mdMedia, $mdSidenav) {
  console.log("MicrositeController instantiated");
  var vm = this;
  vm.page_name = $state.current.data.page_name;
  vm.sidenav_locked_open = false;

  vm.toggleSideNav = function() {
    if ($mdMedia('gt-sm')) {
      vm.sidenav_locked_open = !vm.sidenav_locked_open;
    } else {
      $mdSidenav('left').toggle();
    }
  }
}]);

$stateProvider
  .state('microsite', {
      url: "/",
      templateUrl: "microsite.tmpl.html",
      //Put controller on root state
      controller: 'MicrositeController as vm',
      abstract: true
})

DEMO on PLNKR

【讨论】：