CODEWITHSUNDEEP
javascripthtmlangularjspartial-viewshtml-heading
user2412643
user2412643

Reputation: 153

dynamically change header based on angular js partial view

I know that this question is ALMOST identical, however my implementation needs to be changed slightly and I can't quite work out what to do.

In the answer I linked, the solution involved using 

app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
  $routeProvider.
    when('/test1', {template: 'page 1', controller: Test1Ctrl})
...

app.factory('Page', function(){
    var title = 'default';
    return {
    title: function() { return title; },
    setTitle: function(newTitle) { title = newTitle; }
    };
});

function Test1Ctrl($scope, Page) {
  Page.setTitle('title1');
}
...

within the app.js file. However, and I already have a config of the form:

...
$routeProvider
    .when("/", {
      templateUrl: "partials/landing.html", controller:"landingCtrl"
    })

with the controller landingCtrl defined in another file, controllers.ts, like this:

class landingCtrl {
    public isFirstPlay: any;

    constructor($scope) {
        $scope.vm = this;
        this.isFirstPlay = true;
    }
...

so how would I implement a function of the form in the answer I linked with this layout?

Upvotes: 0

Views: 597

Answers (1)

stackg91
stackg91

Reputation: 594

Okay so we took a very different approach for creating dynamic info for every view.

.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {

$ionicConfigProvider.views.transition('none');

$stateProvider

 .state('login', {
 params: 8,
 url: "/login",
 templateUrl: "templates/login.html",
 controller: "LoginCtrl"
 })

 .state('settings', {
   params: 8,
   url: '/settings',
   templateUrl: "templates/settings.html",
   controller: "SettingsCtrl"
 })
});

Basicly every view has its own template, controller, url, and params, which ofc you can define on your own.

.state('settings', {
  params: {title: Put the title u want here},
  url: '/settings',
  templateUrl: "templates/settings.html",
  controller: "SettingsCtrl"
})

with that said u can easily read the params in your main Controller

 $rootScope.$on('$stateChangeSuccess', function (ev, to, toParams, from, fromParams) {
    $rootScope.previousState = from.name;
    $rootScope.currentState = to.name;
    // gets the name of the current state and sets it as class in the ion-nav-bar!
    $scope.stateName = $rootScope.currentState;
});

In this example whereever i go i know at which state i am and what params this state has for example the title you need

I hope this was helpful

Upvotes: 1

Related Questions