Angular.js "Контроллер как..." + $scope. $on

Если я хотел бы использовать синтаксис "Контроллер как..." в Angular, как мне подойти к таким вещам, как $scope. $on (...), которые мне нужно ввести внутри контроллера?

У меня создается впечатление, что я мог бы сделать это иначе, чем тот, который показан ниже. Здесь, чтобы получить $scope. $При работе я привяжите "this" к функции обратного вызова. Я попытался вызвать $on на "this" внутри контроллера, но это не сработало.

Не могли бы вы дать мне подсказку здесь или если я полностью запутался, не могли бы вы указать мне на правильный путь? Спасибо.

main.js:

angular.module('ramaApp')
.controller('MainCtrl', ['$scope', '$location', function ($scope, $location) {

    this.whereAmINow = 'INDEX';

    $scope.$on('$locationChangeStart', function(event) {

        this.whereAmINow = $location.path();

    }.bind(this));

    this.jumpTo = function(where) { $location.path(where); }
}]);

index.html

<div ng-controller="MainCtrl as main">

    <p>I am seeing the slide named: {{ main.whereAmINow }}</p>

    <div ng-click="main.jumpTo('/slide1')">Slide 1</div>
    <div ng-click="main.jumpTo('/slide2')">Slide 2</div>
    <div ng-click="main.jumpTo('/slide3')">Slide 3</div>

</div>

Ответы

Ответ 1

Насколько я знаю, вам нужно ввести $scope, если вы хотите $наблюдателей/методов. ControllerAs - это просто синтаксический сахар, позволяющий более четко видеть структуру ваших вложенных контроллеров.

Три идеи, которые могут упростить ваш код.

  • Используйте var vm = this, чтобы избавиться от привязки (this).

    var vm = this;
vm.whereAmINow = "/";

$scope.$on('$locationChangeStart', function(event) {
    vm.whereAmINow = $location.path();
});

vm.jumpTo = function(where) {
    $location.path(where);
}

  • Вся переменная whereamINow имеет смысл вставить ее в инициализацию приложения aka.run() (до config), так как я предполагаю, что это глобальная переменная, и вам не нужно использовать метод/метод наблюдения $scope для он.

  • Другой вариант - использовать factory, чтобы изменения сохранялись, поэтому вы просто создаете местоположение factory, которое содержит текущий активный путь.

Ответ 2

Inject $scope, и ваш контроллер доступен тем, что вы назвали его

EG:

$stateProvider
  .state('my-state', {
    ...
    controller: 'MyCtrl',
    controllerAs: 'ctrl',
    ...
  });



.controller('MyCtrl', function($scope) {
  var $this = this;
  $scope.$on('ctrl.data', function(new, old) {
    // whatevs
  });
  $timeout(function() {
    $this.data = 'changed';
  }, 1000);
});