AngularJS : accessing global variable within html template

Question

I am writing an angularJs app:

html :

<div ng-controller=NavCtrl>
        <h1 ng-bind-html="currentTitle"></h1>

</div>

I am searching for a way to update the currentTitle variable in my html which is in global scope.

.service('WorkService', [function(){
    return {
          currentTitle : 'dada'
      };

}])

.controller('NavCtrl', function($scope, $location, $http, WorkService) {
  $scope.works = [];
  $http({method: 'GET', url: '/api/v1/work'}). //collects all works
  success(function(data, status, headers, config) {
      $scope.currentTitle = WorkService.currentTitle;
  })
})

.controller('DetailCtrl', function($scope, $routeParams, $http, WorkService) {

        $http({method: 'GET', url: '/api/v1/work/' + $routeParams.workId + '/'}).
          success(function(data, status, headers, config) {
              $scope.activateButton($routeParams.workId);
              WorkService.currentTitle = data.title;

          })

})

But currentTitle variable is not updated in the template. What am i doing wrong?

See this question and answer: http://stackoverflow.com/a/15800528/238427 — JoseM, May 30 '14 at 14:59

score 4 · Accepted Answer · answered May 30 '14 at 15:03

When you do WorkService.currentTitle = data.title current scope is unaware of this change. That is why you wont see the change in the template.

It is not ideal but for this requirement you may keep the currentTitle in $rootScope and keep update $scope.currentTitle in each controllers and that will do.

.run(function($rootScope){
$rootScope.globalData = {currentTitle : 'dada'}
})
.controller('NavCtrl', function($scope, $location, $http, WorkService) {
  $scope.works = [];
  $http({method: 'GET', url: '/api/v1/work'}). //collects all works
  success(function(data, status, headers, config) {
      $scope.globalData.currentTitle = 'New title';
  })
})
.controller('DetailCtrl', function($scope, $routeParams, $http, WorkService) {

        $http({method: 'GET', url: '/api/v1/work/' + $routeParams.workId + '/'}).
          success(function(data, status, headers, config) {
              $scope.activateButton($routeParams.workId);
              $scope.globalData.currentTitle  = data.title;

          })

})

And in html

<h1 ng-bind-html="globalData.currentTitle"></h1>

@ratata idealism is relative :-). I am using this kind of mechanism in my application and it works perfect for me. — Mathews, May 30 '14 at 15:14
It's generally considered bad practice to store data in the root or global scope if you don't need to. — Jerrad, May 30 '14 at 15:24

Jerrad · Answer 2 · 2014-05-30T15:38:46.977

You can't two-way bind to a variable in a service, but you can bind to an accessor function. Change your service to return getter and setter functions:

.service('WorkService', ['$sce', function($sce){
    var currentTitle= $sce.trustAsHtml('dada');
    return {
      getCurrentTitle: function(){ return currentTitle; },
      setCurrentTitle: function(value){ currentTitle = $sce.trustAsHtml(value);}
    };

Then in your controller you can get the currentTitle like this:

$scope.currentTitle = WorkService.getCurrentTitle;

Note that you are setting it equal to the getCurrentTitle function itself (not the result of the function).

Now your html looks like this:

<h1 ng-bind-html="currentTitle()"></h1>

No need to set up $watches or hang stuff of $rootScope. See Demo here.

AngularJS : accessing global variable within html template

2 Answers2