AngularJs: ui-router * требует * от меня ввода $ scope в мой контроллер (даже с синтаксисом Controller As)? - PullRequest
Новая
       27

AngularJs: ui-router * требует * от меня ввода $ scope в мой контроллер (даже с синтаксисом Controller As)?

0 голосов
/ 25 февраля 2020

Одним из преимуществ синтаксиса «Контроллер как» является то, что он освобождает нас от $ scope.

НО, у меня возникают проблемы, которые, кажется, указывают, что ui-router требует $scope - возможно, получить доступ к состоянию.

Существует множество похожих вопросов, но не с удовлетворительным ответом, поэтому я ищу канонический ответ, к которому я могу отослать эти другие вопросы.

  1. делает ui-router требует меня, чтобы вставить $scope в мой контроллер, даже если код контроллера никогда не ссылается на $scope (потому что я использую синтаксис «контроллер как») ? (ответ на Angular Синтаксис контроллеров маршрутизатора пользовательского интерфейса не работает , по-видимому, подразумевает, что это так. Кроме того, удаление инъекции $scope в этого работающего Plunker нарушает его)

  2. Могу ли я этого избежать (возможно, сообщив моему ui-router config о получении состояния от контроллера объявления "controller as")?

Ответы [ 2 ]

1 голос
/ 25 февраля 2020

Может быть полезен следующий код. 

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>
0 голосов
/ 25 февраля 2020

Нет, 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 на PLNKR

...