CODEWITHSUNDEEP
angularjs
n00n
n00n

Reputation: 664

Updating HTML in Angular is not working

I am still learning angular and in my example projekt I have a problem on updating the view.

Got this in my header .... 

    <meta charset="UTF-8">
    <title>{{ name }}</title>

And this in my body: 

<body ng-controller="BodyController as body">

    <input type="button" ng-click="changeTitle()" name="changeNameButton" value="change name"/>

This is my head controller: 

myApp.controller('HeadController',
    ['$scope', 'ApplicationService', 'DataService', 'UserService', function ($scope, ApplicationService, DataService, UserService) {

        var self = this;
        $scope.name = ApplicationService.getTitle();

    }]
);

And here is my body controller: 

myApp.controller('BodyController', ['$scope', 'ApplicationService', function ($scope, ApplicationService) {

    $scope.text = 'Hello, Angular fanatic.';

    $scope.changeTitle = function () {
        console.log('change the title');
        ApplicationService.setTitle('test');
    }

}]);

This is my application service

myApp.service('ApplicationService', ['ConfigurationService', function(ConfigurationService){

    this.title = '';

    this.setTitle = function (newTitle) {
        console.log('new title (setter): ' + this.title);
        this.title = newTitle
    }

    this.getTitle = function () {
        if(this.title==''){
            this.title = ConfigurationService.title + ' | ' + ConfigurationService.subtitle;
        }
        console.log('new title (getter): ' + this.title);
        return this.title;
    }
}]);

So far so good and sorry that I do not use codepen, etc. But it was not working in it, ...

My Problem: It is setting the title on initial load of the website, but not on pressing the button. The new name is set to ApplicationService.title, but header controller does not update it. Whats is wrong in this case? How can I update the title in the view...?

Regards n00n

see the codepen for it: https://codepen.io/n00n/pen/bqaGKY

Upvotes: 1

Views: 213

Answers (2)

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

That didn't work because you're calling getTitle method when title wasn't set. So that's it is referring to older title('undefined'). You can change your binding to 

$scope.getTitle = ApplicationService.getTitle;

And then change HTML to

{{getTitle()}}

So title will get fetch from service and updated on the page on each digest cycle.

Other thing which I'd like to mention is, don't use(mix) $scope when you are using controllerAs, so then remove $scope from controller and bind data to below

var vm = this;
vm.getTitle = ApplicationService.getTitle;

Upvotes: 1

JB Nizet
JB Nizet

Reputation: 691685

What you're doing is the equivalent of the following simple code:

//in the header controller
var name = service.getTitle();

// in the header template
display(name);

// later, in the body
service.setTitle('test');

// in the header template
display(name);

You see that this can't work: the variable name in the header controller has been initialized when the controller was created, and assigning a new value to the title stored in the service can't magically change the value of the name variable in the header controller. What you want is to display the title in the service:

<title>{{ getTitle() }}</title>

$scope.getTitle = function() {
  return ApplicationService.getTitle();
};

Upvotes: 1

Related Questions