CODEWITHSUNDEEP
javascriptangularjsmodel-view-controller
Sk1ppeR
Sk1ppeR

Reputation: 387

AngularJS update controller variable and render the view again?

I have a webpage with a very simple structure, imagine left navigation, header bar and content area. If I have to describe it with code it looks like this 

<body>
<aside ng-controller="SideNavCtrl">Left Nav data</aside>
<header ng-controller="HeaderCtrl">Page Title</header>
<section>
    <article ng-view>Page Content</article>
</section>

I'm using ngRoute and change my routes left and right. What I want is to update "Page Title" from the controller that accepted the route. I've tried hundreds of different ways but changing variable never forces header data update. Here's my latest variable share between controllers (which doesn't work)

app.controller("HeaderCtrl", ["$scope", "HeaderData", function($scope, HeaderData) {

        $scope.title = HeaderData.title();

    }]);

    app.factory("HeaderData", function() {

        var title = 'Default';

        return {
            title: function() { return title; },
            setTitle: function(newTitle) { title = newTitle; }
        }

    });

Later on in the routed controller I go like this 

app.controller("PreviewBuildCtrl", ["$scope", "$routeParams", "$location", "BuildsAPIService", "HeaderData", function($scope, $routeParams, $location, BuildsAPIService, HeaderData) {

    $scope.build = BuildsAPIService.getBuildById($routeParams.buildId);

    HeaderData.setTitle("Previewing Build");

    console.log(HeaderData);

    if (!$scope.build) {
        $location.url('/builds/' + $routeParams.profession);
    }

}]);

The problem is that using HeaderData.setTitle() doesn't update the header contents. I really don't want to write jQuery code for this task. There must be a smarter, more angular way of doing this.

All I want to do is change the header title to "Page B" when you move to page b from page a and I consider adding breadcrumbs plugins an overkill for the task at hand :(

Upvotes: 1

Views: 2406

Answers (1)

Explosion Pills
Explosion Pills

Reputation: 191749

You break the data binding via title = newTitle. The controllers are pointing to the old title, but HeaderData is not pointing to it anymore so it is lost. You need another dot.

this.title = newTitle;

The title method should also return this.title, of course.

Upvotes: 2

Related Questions