angularjsdependency-injectionangularjs-resource

Angular injects module causing bind fails


I have recently started a new project on angularJS.

I have an index.html which basically render all the script files when started. There is a ng-view inside, the home.html will be loaded by ngRoute and is binded to a controller called HomeCtrl.

When I inject $resource to my HomeCtrl, the ng-bind on my html becomes not working, while removing the $resource it will work.

app.controller('HomeCtrl', ['$resource', function ($scope, $resource) {
     $scope.testText = 'testabc';
}])

I have tried inject something else, the behavior is also the same, the ng-bind will not work. There is no error shown in the browser console. May I know how can I trace what is actually happening?

Files as below:

https://plnkr.co/edit/P92PLlrWoqINpfeju5X1?p=preview


Solution

  • You forgot to add '$scope', angular tries to inject the objects in the order they are set.

    Change

     app.controller('HomeCtrl', ['$resource', function ($scope, $resource) {
         $scope.testText = 'testabc';
     }])
    

    to

    app.controller('HomeCtrl', ['$scope', '$resource', function ($scope, $resource) {
         $scope.testText = 'testabc';
    }])