Could not instantiate controller with $scope injected

[nlarche]

angularjs Could not instantiate controller with $scope injected when i use the new router v0.5.3
the same controller is working without $scope injected

here is a Plunker : http://plnkr.co/edit/Fl128QOUpPOJ9vCIdQVB?p=preview

[nikaspran]

No new release yet, working on master if you build from scratch using gulp.

[zvictor]

you are not alone on that one!

http://stackoverflow.com/q/30167898/599991

http://jsbin.com/yegowi/1/edit?html,js,output

[gdpelican]

If anyone's running into this in a spot where building from source isn't practical, we've made an interim npm package that fixes this:

npm install loomio-angular-router@0.5.7

(Note that there are some potentially breaking changes, such as renaming ng-viewport to ng-outlet, and moving the $componentMapperProvider classes into a factory, which may need to be dealt with). 🐟

(updated to use a working version of the package)

Have you made a test with 0.5.4? You can load it from //rawgit.com/loomio/router/master/dist/router.es5.js in your plnkr. However switching from 0.5.2 to 0.5.4 which should fix the scope issue and replacing ng-view by ng-outlet seems not working!

[gdpelican]

Thanks for the tip, @ZeGregg; I've updated the dist files in v0.5.7, which should work better for ya.

Cheers!

Here is a working version http://plnkr.co/edit/dSdiKr?p=preview

[zvictor]

would be nice to see some progress here soon.

[bernfarr]

If there's an interim package available, could this please be added into the main release?

[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?

[flavienbert]

Hi @TomerAvni , it makes sense but how do you use $broadcast or $emit in you controller without $scope?

@ TomerAvni ,I used ur approach nd it worked fine,but I have an another issue now,I want to change my expression {{home.result}} placed inside my form.I will change it after form submission .With $scope it would hv been working without page reload in a simple manner .But as for using this.result it doesnt works,it works only first time when page loads.Any workaround?

[laurengarcia]

@flavienbert and @TomerAvni If I understand correctly, I think Angular 2.0 wants to get rid of the idea of $scope in controllers (no $scope.$emit and $scope.$broadcast anymore) so that Angular can have uni-directional data/event flow (mimicking React), so my interpretation of all this is that we should start using $rootScope.$broadcast for events/state changes? Is this a fair assessment of how to move forward?What happens to $scope.$watch if this is the case?