Dynamically inject resource into controller - angularjs

Question

This works:

function DetailsCtrl($scope, Plan){
    $scope.entities = Plan.query();
}

This does not:

function DetailsCtrl($scope){
    var injector = angular.injector(['myApp.services']);
    var name = 'Plan';
    var Entity = injector.get(name);

    $scope.entities = Entity.query();
}

In the second case, no error is thrown and console.log($scope.entities) dumps the loaded entities. BUT the variables are not rendered in the template. I'm guessing the template is being loaded before the $scope is being populated with the vars. If so, how do I ensure that $scope is loaded with the vars in time?

If you use the ng-app directive, Angular will automatically create (the one) injector for the app: docs.angularjs.org/guide/bootstrap (See the Automatic Initialization section). So, if you are using ng-app, then you create another injector... I think you'll have problems. An app should only have one injector, and normally you want the automatically created one. — Mark Rajcok
– Mark Rajcok, Commented Sep 10, 2012 at 15:57
Why not stick with the first way of getting your dependencies? In general you shouldn't need to touch angular's injector, you should let Angular do the injecting. See roytruelove.blogspot.com/2012/09/… — Roy Truelove
– Roy Truelove, Commented Sep 11, 2012 at 1:25

waigani · Accepted Answer · 2012-09-10 21:30:27Z

5

I created a service to dynamically load the resources:

service:

var m = angular.module('myApp.services', ['ngResource']).
    factory('Entity',function($resource){
        return {
            Plan: $resource('/api/plans/:id',{id: '@id'})
        }
    }).
  value('version', '0.1');

controller:

function DetailsCtrl($scope, Entity){
    $scope.entities = Entity['Plan'].query();
}

answered Sep 10, 2012 at 21:30

waigani

3,5905 gold badges50 silver badges71 bronze badges

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

Comments

matsko · Accepted Answer · 2012-09-10 05:07:36Z

1

Yes this is the case. Angular templates are loaded regardless if the scope is expected to fetch data from resources or http calls. From my understanding, Angular either listens on the $scope variable or has some magic methods trigger a reload of the template rendering.

In this situation, perhaps angular is recognizing that a shared resource service (the Plan model) is being passed in and it expects that it will be used to fetch some data. While in the 2nd example, Angular has no clue that you're going to be using another service within, so it doesn't prepare any callbacks or checking operations for the $scope variable.

If for whatever reason you set a value to a $scope variable and Angular doesn't notice the change then you can update your template right away then you can call this:

$scope.$digest(); //or $scope.$apply();

The only issue is that it throws and error if you call it when it's already performing a digest operation (just use try/catch branches around the statement).

If that doesn't work then you will need to double check to see that the template itself has the proper syntax for expressions.

answered Sep 10, 2012 at 5:07

matsko

22.3k22 gold badges106 silver badges146 bronze badges

2 Comments

waigani Over a year ago

I've tried both $scope.$digest() and $scope.$apply(). Indeed, they throw a 'digest already in progress' error and the try / catch catches the error - but the vars are still not rendering to the template. I've triple checked the template syntax.

matsko Over a year ago

Follow the steps here: yearofmoo.com/2012/10/…

Collectives™ on Stack Overflow

Dynamically inject resource into controller - angularjs

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related