Binding a variable inside a service to html template in an Angular App

Question

I have an standard Angular.js App. I have a service like this:

app.service("myService",function(){
   this.variable = "world";
});

In my controllers I can use this service like this:

app.controller("loginCtrl",function($scope,myService){
    $scope.value = myService.variable; // this works
});

But my problem is that I cant access to service values inside my HTML template:

<h1>hello {{myService.variable}}</h1> //this doesn't work

If I store service variable in a temp variable inside my controller, I can use that temp inside the template but i don't like this method. is there any proper way?

ste2425 · Accepted Answer · 2015-09-12 21:56:22Z

Your scope variable is what angular will use to bind to your view. Your view does not have access to your services as they are not part of your scope.

The controllers purpose if to bring all your services together and provide that data to your view/scope.

You generally don't expose your services directly to your scope. They usually provide generic single reuseable pieces of logic. This makes them greatly re-usable and easily testable. However you could data bind directly to them by

$scope.myService = myService;

However i would personally avoid this like the plague as a service is used through the entirety of your app, changes your view makes to the service will be reflected throughout your application. This will make your service un-trustable is structure and most likely useless.

I created a fiddle showing : http://jsfiddle.net/5g3tnq17/

var app = angular.module('test', [])
.controller('testController', function($scope, testService){
    //When you modify $scope.testService
    $scope.testService = testService;
})
.service('testService', function(){
    this.prop = 'hi';   
})
.directive('testDirective', function(testService){
   return {
    type: 'EA',
    template: '<button ng-click="get()">get service value</button>{{serviceValue}}',
    link: function($scope, elem, sttr){
        //Test service will also be modified anywhere else you use it
        $scope.get = function(){
            $scope.serviceValue = testService.prop;   
        }

        $scope.get();
    }
   } 
});

Joe Lloyd · Accepted Answer · 2015-09-12 22:12:32Z

1

To access it in your html you need to bind it to your controller and then use $scope in your html like this.

Service

app.service("myService",function(){
  this.variable = "world";
});

Controller

app.controller("loginCtrl",function($scope,myService){
  $scope.value = myService.variable;
});

HTML

<h1>hello {{value}}</h1>

You never inject your services in your HTML, only in your controller.

edited Sep 12, 2015 at 22:12

answered Sep 12, 2015 at 21:41

Joe Lloyd

22.8k7 gold badges59 silver badges86 bronze badges

6 Comments

Fcoder Over a year ago

thanks. as i say, i know this, but i want to know is there any other way? for example direct access to service variables from html

Joe Lloyd Over a year ago

I missread. but no, I don't belive there is, at least not in a way that would be considered good practice. why do you want direct access?

Fcoder Over a year ago

each controllers in my app binded to its html, and there is a common variables that i use them via services in each controller and that variables changes the UI(binded to UI).

ste2425 Over a year ago

You do not instantiate services in your controllers. They are singletons, each injection (controller, directive etc) gets the same instance. Factories return a new instance to each injection, however it instantiates it itself, not the thing requesting it. Unless you expose a data object that requires instantiate after this that is.

ste2425 Over a year ago

Its just injected in. Its dependency injection. Angular will instantiate your service upon the first time it was asked for. It will then use that for everything else. Thas why you can use the this keyword to define your service method and props if you wish. .service('test', function() { this.prop = 'eyup'; });

|

Collectives™ on Stack Overflow

Binding a variable inside a service to html template in an Angular App

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related