dynamically change header based on angular js partial view

Question

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?

stackg91 · Accepted Answer · 2015-06-26 10:56:03Z

1

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

answered Jun 26, 2015 at 10:56

stackg91

5948 silver badges25 bronze badges

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

1 Comment

user2412643 Over a year ago

I'm not really sure what's going on here - sorry :( thanks for trying though

Collectives™ on Stack Overflow

dynamically change header based on angular js partial view

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related