Updating HTML in Angular is not working

Question

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

JB Nizet · Accepted Answer · 2017-03-17 07:03:24Z

1

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();
};

answered Mar 17, 2017 at 7:03

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

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

4 Comments

n00n Over a year ago

Thx, ... What do yoz exactly mean with "// in the header template display(name);"?

JB Nizet Over a year ago

It's what angular does for you: it reads the name from your header component and displays it in the html page.

n00n Over a year ago

Still in trouble to understand it. I made a code pen, .. would you like to show me how it should work? codepen.io/n00n/pen/bqaGKY

n00n Over a year ago

Thank you very much, it took me a while to understand, but now it works.

Pankaj Parkar · Accepted Answer · 2017-03-17 07:03:43Z

1

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;

answered Mar 17, 2017 at 7:03

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Collectives™ on Stack Overflow

Updating HTML in Angular is not working

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related