Inject $scope to controller

[NetanelBasal]

How i can use $scope to gain access to functions likes $watch, $emit, $digest?

[0x-r4bbit]

@NetanelBasal Dependency injection as usual. A controller is still just a controller, there's no change with the new router, it just defaults to controllerAs mechanics. In other words, you should be able to do this:

function WhateverController($scope) {
  // do something with $scope
}

[NetanelBasal]

So why i get this error: Could not instantiate controller HomeController

when i do this:

class HomeController {
  // @ngInject
  constructor($scope) {

  }
}

export default HomeController;

[Dynalon]

@PascalPrecht with latest git version of the newRouter this is not possible anymore (and it shouldn't be possible because the controller is instantiated at a time where no $scope is available).

With the new router you can't inject $scope at the controller constructor, but you can inject it in the activate() function on the controller:

class HomeController {
  activate($scope) {
    $scope.$watch(/* ... */);
  }
}

(assuming TypeScript with Angular 1.4rc and newRouter).

[iPaoo]

You can make a try with npm install loomio-angular-router@0.5.7 please see https://github.com/angular/router/issues/313

[0x-r4bbit]

Interesting, then I'm very sorry, I didn't know that! Feels a bit weird that it's available as injectables in activate() but not in constructor() though.

[0x-r4bbit]

reopening

[maximilianmikus]

having this issue as well... +1

[ghost]

I was planning to migrate from ui-router to angular new router. But this issue brings too much effort if I would do the migration. Then I gave the migration another thought and will probably use the new router in a new project instead of migrating my current one.

And I also get a feeling that the new router is still experiencing significant changes. So probably not a good time to use it in production, the backward compatibility is also an issue I can see. Will keep paying attention to the new router and playing with it.

[bernfarr]

We're really suffering because we can't use $watch and $on easily from within activate. Probably because we're still trying to grok AngularJS. Is there any planned release data for 0.5.7, or does anyone know of a workaround that would allow us to inject $scope into the controller?

[0x-r4bbit]

Please don't use this source code in production as it's a) not finished b) on hold since the actual development happens in http://github.com/angular/angular (as stated in the readme)

Ui-router is still the best router around for your A1 apps.

Thanks!

On Tue, Oct 13, 2015, 9:11 PM Bernard Farrell notifications@github.com wrote:

We're really suffering because we can't use $watch and $on easily from within activate. Probably because we're still trying to grok AngularJS. Is there any planned release data for 0.5.7, or does anyone know of a workaround that would allow us to inject $scope into the controller?

— Reply to this email directly or view it on GitHub https://github.com/angular/router/issues/327#issuecomment-147817861.

[TomerAvni]

NEWER ANSWER
With the new router the controller gets initiated before the child scope is being created.
The child scope (the controller's scope) is created when the activate method is being called - that is - after the actual compilation of the view is finished. Therefore, it is simple impossible the inject $scope - it is simple created later.
Long story made short... There is a better, built-in solution for this.
Instead of assigning your properties to the non-existing-yet $scope, simply assign them on the "this" variable - the controller instance variable. Then on the view, you can use them by referring the controller name:

angular.module('app.home').controller('HomeController', HomeController);

function HomeController() {
    this.name = "tomer";
}

And now on the template html:

<div>
    <h1>{{home.name}}
</div>

Makes sense?

[Dynalon]

@TomerAvni yes makes sense, but does not answer the original question/issue. The question was how to get $digest, $emit, $watch etc. access which reside as functions on the $scope.

[raghavsood33]

dist/router.es5.js in loomio-angular-router v0.5.4 and v0.5.7 are identical. It supposedly fixes the $scope injection problem but I get Unknown provider: $componentLoaderProvider Which version has both of these?