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: stackoverflow.com/a/15800528/238427 — JoseM
– JoseM, Commented May 30, 2014 at 14:59

Mathews · Accepted Answer · 2014-05-30 15:03:42Z

4

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>

answered May 30, 2014 at 15:03

Mathews

8991 gold badge7 silver badges13 bronze badges

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

2 Comments

Mathews Over a year ago

@ratata idealism is relative :-). I am using this kind of mechanism in my application and it works perfect for me.

Jerrad Over a year ago

It's generally considered bad practice to store data in the root or global scope if you don't need to.

Jerrad · Accepted Answer · 2014-05-30 15:38:46Z

3

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.

edited May 30, 2014 at 15:38

answered May 30, 2014 at 15:31

Jerrad

5,3001 gold badge20 silver badges23 bronze badges

Collectives™ on Stack Overflow

AngularJS : accessing global variable within html template

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related