How can I call a service from a template in AngularJS?

16,488

Solution 1

Yes, it would be best practice to create a controller.

The idea behind the MVC app architecture is that you don't tightly couple your objects/classes together. Injecting a service into a controller, then subsequently your controller adding levels to $scope means that your HTML doesn't have to worry about where it gets the data from.

Also, using ng-init in that way is arguably fine for knocking up a very quick prototype, but that approach shouldn't be used in production code (as your model's data itself is tightly coupled to your view's HTML).

Tip: It might be a good idea to use a controller for the parent container of your dropdown-menu (ie. the page/section) and then use a directive for your dropdown-menu itself. Think of a directive as a view component.

In general, you might find the video tutorials at egghead.io helpful.

Solution 2

put the service in a controller.. Then you can call service in your template..

app.controller('yourCtrl', function($scope, levelService) {
   $scope.levelService= levelService;
});
Share:
16,488

Related videos on Youtube

nycynik
Author by

nycynik

Experienced Software Developer - Currently focused mostly on iOS and web development.

Updated on September 15, 2022

Comments

  • nycynik
    nycynik about 1 year

    I have a service that returns a json object that it makes, for brevity lets say it looks like this:

    .service ('levelService', function () {
    
        // service to manage levels.
        return  {
            levels : [{name:'Base', href:'base'},{name:'Level 1', href:'level1'},{name:'level2', href:'level2'}]
        };
    
    })
    

    I think that is fine, but I want to use it now, in a template. Currently I have something like this:

    <ul class="dropdown-menu" ng-init="levels = [{name:'Base', href:'base'},{name:'Level 1', href:'level1'},{name:'level2', href:'level2'}];">
                          <li ng-repeat="level in levels">
          <a ng-href="#/modeling/level/{{level.href}}">{{level.name}}</a></li>
                      </ul>
    

    How can I get the ng-init to now use the service? I feel like the right thing to do, is add the service to the controller, but this is outside of any controller. Do i need to create a new controller for this space, or can i directly reference the service?

  • nycynik
    nycynik over 10 years
    thanks! Took your advice, instead of making a directive, just made another controller.