CODEWITHSUNDEEP
angularjsangular-ui-router
Ahmed Abd Ellatif
Ahmed Abd Ellatif

Reputation: 195

change page title in ui-router not work

i try to change my page title in angular app use ui router i found this demo and its work fine https://plnkr.co/edit/NpzQsxYGofswWQUBGthR?p=preview

but when i attempt to try the same demo not work i need to find issue that make my demo not work https://plnkr.co/edit/pqumJL?p=preview

why demo not change page title although it's work in demo

Upvotes: 0

Views: 326

Answers (3)

Ahmed Abd Ellatif
Ahmed Abd Ellatif

Reputation: 195

Thanks the problem solved there is an error in ui router script and incompatible version when use online version the problem solved

thanks all

Upvotes: 0

Dan M. CISSOKHO
Dan M. CISSOKHO

Reputation: 1065

In plunkr you just have to replace 

<script src="app-directives/title-directive.js"></script>

by

<script src="title-directive.js"></script>

I can provide you a better way to do so:

link: function (scope, element, attrs) {
                    var defaultTitle = element.text();
                    if (element[0].tagName === 'TITLE') {
                        var listener = function (event, toState) {
                            var title;
                            if (toState.data && toState.data.pageTitle) {
                                if(toState.data.placeholder && toState.data.placeholder.title)
                                    title = toState.data.pageTitle, toState.data.placeholder.title;
                                else
                                    title = toState.data.pageTitle;
                            } else if (defaultTitle) {
                                title = defaultTitle;
                            } else {
                                title = 'No title';
                            }

                            $timeout(function () {
                                element.text(title);
                            }, 0, false);
                        };

                        $rootScope.$on('$stateChangeSuccess', listener);
                    }
                }

Upvotes: 1

Mustapha Larhrouch
Mustapha Larhrouch

Reputation: 3393

try this :

(function () {
    'use strict';

    angular
        .module('app', ['ui.router'])
        .config(config)

    config.$inject = ['$stateProvider', '$urlRouterProvider', '$urlMatcherFactoryProvider'];

    function config($stateProvider, $urlRouterProvider, $urlMatcherFactoryProvider) {

      $urlRouterProvider.otherwise('/home');

      $urlMatcherFactoryProvider.caseInsensitive(true);

        $stateProvider
            .state('home', {
                url: '/home',
                templateUrl: 'home.view.html',
                data: {
                    pageTitle: 'Home'
                }
            })
            .state('about', {
                url: '/about',
                templateUrl: 'about.view.html',
                data: {
                    pageTitle: 'About'
                }
            })

    }



})();

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <meta charset="utf-8" />
     <script src="https://code.angularjs.org/1.3.3/angular.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.11/angular-ui-router.min.js"></script>

    <script src="app.js"></script>
    <script src="app-directives/title-directive.js"></script>
     <title>{{title}}</title>
  </head>

  <body>
    <div class="panel" ui-view></div>
    <ul class="nav navbar-nav">
      <li>
        <a ui-sref="home" ui-sref-active="activeState">Home</a>
      </li>
      <li>
        <a ui-sref="about">About</a>
      </li>
    </ul>
  </body>

</html>

https://plnkr.co/edit/JifcOKrUC9tBfV8jY5ko?p=preview

Upvotes: 2

Related Questions