Angular.js “控制器为 ...” + $scope.$on答案

【问题标题】：Angular.js "Controller as ..." + $scope.$onAngular.js “控制器为 ...” + $scope.$on
【发布时间】：2015-02-13 10:15:39
【问题描述】：

如果我想在 Angular 中使用“Controller as ...”语法，我应该如何处理需要放入控制器中的 $scope.$on(...) 之类的东西？

我有一种印象，除了下面显示的方法之外，我还可以采用其他方法。在这里，为了让 $scope.$on 工作，我将“this”绑定到回调函数。我试图在控制器内的“this”上调用 $on，但它没有用。

你能在这里给我一个提示吗，或者如果我完全搞砸了，你能给我指出一些正确的方法吗？谢谢。

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>

【问题讨论】：

标签： angularjs angularjs-scope

【解决方案1】：

据我所知，如果你想要 $scope 观察者/方法，你需要注入 $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);
}

另一种选择是使用工厂来使更改保持不变，因此您只需创建一个位置工厂来保存当前活动路径。

【讨论】：

感谢@jedanput 的澄清并指出我的 .run() 函数。干杯！
我认为您的意思是“语法糖”而不是“合成糖”

【解决方案2】：

注入$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);
});

【讨论】：

【解决方案3】：

好的，我认为人们只是这样做，就像在这个问题中一样：

Replace $scope with "'controller' as" syntax

【讨论】：