How can we watch expressions inside a controller in angular 1.4 using angular-new-router

Question

Since we cannot inject $scope inside controllers in Angular 1.4+, how can we watch expressions the way we used to do with $scope.$watch?

An attempt to inject $scope can be seen here ("Could not instantiate controller" error), and tutorials tells us that:

Angular wont be able to instantiate the controller if we pass $scope in it. It defines its observable properties on this. (source)

possible duplicate of [Angularjs: 'controller as syntax' and $watch](http://stackoverflow.com/questions/24078535/angularjs-controller-as-syntax-and-watch) — charlietfl, May 11 '15 at 12:44
I don't understand the question. You most certainly can inject $scope. — Michael Oryl, May 11 '15 at 12:49
I can't inject `$scope`, I get an error if I try. http://jsbin.com/yegowi/1/edit?html,js,output — zVictor, May 11 '15 at 12:50

score 2 · Answer 1 · answered May 13 '15 at 12:44

2

I have just found out that there is a bug on ngNewRouter causing this problem. It has been fixed, but haven't been released yet.

To workaround it, try this:

$ git clone git@github.com:angular/router.git
$ cd router
$ npm install
$ gulp angularify

after that, copy the dist files to your project

answered May 13 '15 at 12:44

zVictor

3,610
3
41
56

If you get `Permission denied (publickey). fatal: Could not read from remote repository.` run `git clone https://github.com/angular/router` instead – tanguy_k May 18 '15 at 21:40
`gulp angularify` outputs `No gulpfile found` ! – raghavsood33 Jun 28 '16 at 19:39

score 2 · Accepted Answer · edited May 27 '15 at 12:20

2

I ran into this and needed an npm package; no good having everyone on the team build from source for the time being. We released an interim package on npm that fixes this issue: npm install loomio-angular-router@0.5.7

Note: you may need to rename ng-viewport to ng-outlet to get the interim package working.

edited May 27 '15 at 12:20

zVictor

3,610
3
41
56

answered May 20 '15 at 16:23

gdpelican

568
4
12

There is also an issue with $componentLoaderProvider, how can I resolve it? Unknown provider: $componentLoaderProvider – Dor Cohen Feb 25 '16 at 09:38

Alexandru R · Answer 3 · 2015-06-11T14:56:35.507

you have $watch available in .activate. Check bellow (copy paste from my app).

function accountHistoryController (authService, accountFactory, CONSTANTS, $q, $routeParams) {

}
accountHistoryController.prototype.canActivate = function() {
    return !!this.authService.isAuthenticated();
}
accountHistoryController.prototype.activate = function($scope) {
    console.log ($scope);
    $scope.$watch('_this.currentPage', function(newPage){
    if (newPage == undefined) return;

});

}

How can we watch expressions inside a controller in angular 1.4 using angular-new-router

3 Answers3

Linked