Angular.js "Controller as ..." + $scope.$on

Question

If i'd like to use the "Controller as ..." syntax in Angular, how should I approach things like $scope.$on(...) that i need to put inside the controller?

I get an impression i could do it some other way than the one shown below. Here, to get $scope.$on working i bind "this" to the callback function. I tried to invoke $on on "this" inside the controller but it didn't work.

Could you give me a hint here or if i'm completely messing up, could you point me to some right way to do it? Thanks.

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>

Samir Alajmovic · Accepted Answer · 2015-08-30 10:14:15Z

7

As far as I know, you need to inject $scope if you want $scope watchers/methods. ControllerAs is just syntactic sugar to enable to see more clearly the structure of your nested controllers.

Three ideas though which may simplify your code.

Use var vm = this, in order to get rid of the bind(this).

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

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

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

The whole whereamINow variable makes sense putting it into the initialization of app aka .run() (before config) since I assume it's a global variable and you don't need to use a $scope watcher/method for it.
Another option is to use a factory to make the changes persist, so you simply create a location factory which holds the current active path.

edited Aug 30, 2015 at 10:14

answered Feb 13, 2015 at 11:56

Samir Alajmovic

3,3033 gold badges29 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Greg Over a year ago

Thank you @jedanput for clarification and pointing me to the .run() function. Cheers!

Krimson Over a year ago

I think you meant "syntactic sugar" instead of "synthetic sugar"

Leo · Accepted Answer · 2016-09-22 01:31:15Z

0

Inject $scope and your controller is accessible by whatever you named it

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);
});

edited Sep 22, 2016 at 1:31

Leo

13.9k5 gold badges47 silver badges64 bronze badges

answered Jul 25, 2016 at 18:47

ilovett

3,39836 silver badges39 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:26:20Z

-2

Ok, i think people just do the same, just as in this question:

Replace $scope with "'controller' as" syntax

edited May 23, 2017 at 12:26

CommunityBot

11 silver badge

answered Feb 13, 2015 at 12:00

Greg

2055 silver badges14 bronze badges

Collectives™ on Stack Overflow

Angular.js "Controller as ..." + $scope.$on

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related