$ रूट का उपयोग कर कोणीय में पृष्ठ शीर्षक को कैसे बदलें प्रदाता

मुझे कई समान प्रश्न, however none of the answers helped मिले। वे सभी प्रकार के $location निर्भरताओं को शामिल करने लगते हैं कि मैं सही इंजेक्शन पाने में असमर्थ हूं।

मेरे नीचे कोड:

(function() { 

    // App dependencies 
    var app = angular.module('portalExchange', 
         ['ngRoute', 
         'app-products', 
         'app-manage', 
         'app-profile']); 

    // [ Main Controller ] : PortalController 
    app.controller('PortalController', function($scope) { 
     if ($('.top_link_dashboard').hasClass('unactive_top')) { 
      $('.top_link_dashboard').removeClass('unactive_top'); 
      $('.top_link_dashboard').addClass('active_top'); 
     } 
    }); 

    // Controller for Dashboard 
    app.controller('DashboardController', function() { 
    }); 

    // Controller for Developers 
    app.controller('DevelopersController', function($scope) { 
     // Page.setTitle('Developers'); 
    }); 

    // Controller for Quote 
    app.controller('QuoteController', function($scope) { 
     // Page.setTitle('Begin Quote'); 
    }); 

    // Directive for Header 
    app.directive('appHeader', function() { 
     // Type of Directive, E for element, A for Attribute 
     // url of a template 
     return { 
      restrict: 'E', 
      templateUrl: 'templates/modules/globals/app-header.html' 
     }; 
    }); 

    // Directive for Footer 
    app.directive('appFooter', function() { 
     return { 
      restrict: 'E', 
      templateUrl: 'templates/modules/globals/app-footer.html', 
      controller: function(){ 
       this.date = Date.now(); 
      }, 
      controllerAs:'footer' 
     }; 
    }); 

    // configure our routes 
    app.config(function($routeProvider) { 
     $routeProvider 

     // route for the dashboard page 
     .when('/', { 
      templateUrl : 'templates/sections/app-dashboard.html', 
      controller : 'DashboardController' 
     }) 

     // route for the dashboard page 
     .when('/dashboard', { 
      title : 'My Dashboard', 
      templateUrl : 'templates/sections/app-dashboard.html', 
      controller : 'DashboardController' 
     }) 

     // route : Developers Page 
     .when('/developers', { 
      title : 'For Developers', 
      templateUrl : 'templates/sections/app-developers.html', 
      controller : 'DevelopersController' 
     }) 

     // route : Begin Quote 
     .when('/quote', { 
      title : 'Begin Quote', 
      templateUrl : 'templates/sections/app-quote.html', 
      controller : 'QuoteController' 
     }); 
    }); 

    app.run(['$rootScope', '$route', function($rootScope) { 
     $rootScope.$on('$routeChangeSuccess', function(newVal, oldVal) { 
      if (oldVal !== newVal) { 
       document.title = $route.current.title; 
      } 
     }); 
    }]); 

})();

भागो समारोह

app.run(['$rootScope', '$route', function($rootScope) { 
    $rootScope.$on('$routeChangeSuccess', function(newVal, oldVal) { 
     if (oldVal !== newVal) { 
      document.title = $route.current.title; 
     } 
    }); 
}]);

एचटीएमएल

<!DOCTYPE html> 
<html lang="en" ng-app="portalExchange" ng-controller="PortalController as portal"> 
<head> 
    <meta charset="utf-8"> 
    <title ng-bind="title">myApp</title> 
</head>

स्रोत

2014-10-10 Leon Gaban

कंसोल में आपको क्या त्रुटि है? – Acsisr

क्यों हर बार स्थान बदलते समय 'document.title = $ scope.myTitle' लाइन को कॉल न करें? –

@ माइक बिल्कुल, एक और दर्शक बाध्यकारी की कोई ज़रूरत नहीं है। – dfsq

तरह से मैं यह काफी सरल है। मार्ग विन्यास में आप title को परिभाषित:

.when('/dashboard', { 
    title : 'My Dashboard', 
    templateUrl : 'templates/sections/app-dashboard.html', 
    controller : 'DashboardController' 
})

तो आप $routeChangeSuccess घटना सुनने और बस document.title निर्धारित किया है। आवेदन रन ब्लॉक (इस के लिए सबसे अच्छी जगह) में:

app.run(['$rootScope', '$route', function($rootScope, $route) { 
    $rootScope.$on('$routeChangeSuccess', function() { 
     document.title = $route.current.title; 
    }); 
}]);

इस दृष्टिकोण का लाभ यह है कि आप एक और बाध्यकारी ng-bind="title", जो अच्छा है से बचने के लिए अनुमति देता है।

स्रोत

2014-10-10 21:10:34 dfsq

क्षमा करें, अभी भी इसके साथ परेशानी है :($ रूट अपरिभाषित है, मुझे यकीन नहीं है कि मैं इसे सही तरीके से इंजेक्ट कर रहा हूं ... कई त्रुटियां। मैं अपना नवीनतम कोड अपलोड कर रहा हूं और जल्द ही एक लिंक पोस्ट करूंगा –

क्षमा करें, ज़ाहिर है आपको '$ रूट' सेवा इंजेक्ट करने की भी आवश्यकता है। अद्यतन उत्तर पर एक नज़र डालें। – dfsq

आपको 'रन' फ़ंक्शन में '$ रूटस्कोप' और '$ रूट' सेवाओं को इंजेक्ट करने की आवश्यकता है, जैसे उत्तर में मेरे उदाहरण में। – dfsq

यह एक छोटा सा विषय है, लेकिन मैं ui-router का उपयोग करने वाले कोणीय अनुप्रयोग में पृष्ठ शीर्षक का प्रबंधन करने की कोशिश कर रहा था और मैं कुछ मुद्दों में भाग गया। सबसे पहले, मुझे route और $routeChangeSuccess से $state और $stateChangeSuccess और दूसरा बदलना पड़ा, ब्राउज़र में इतिहास के पिछले पृष्ठ शीर्षक को जोड़ने से पहले मुझे पृष्ठ शीर्षक शीर्षक अपडेट करने में कोई समस्या थी, इसलिए मुझे टाइमआउट जोड़ना पड़ा घटना निम्नलिखित कोड है, जिसके परिणामस्वरूप हैंडलर:

angular.module('myApp').run(appRunFunction); 

appRunFunction.$inject = ['$rootScope', '$state', '$timeout']; 

function appRunFunction($rootScope, $state, $timeout) { 
    $rootScope.$on('$stateChangeSuccess', function() { 
     $timeout(function() { document.title = $state.current.title; }, 100); 
    }); 
}

स्रोत

2015-08-19 19:41:35

क्योंकि कभी कभी $ मार्ग इंजेक्शन (उदाहरण के लिए, इकाई परीक्षण चलाने में) समस्या का कारण बनता है यह एक और तरीका

app.run(['$rootScope', function($rootScope) { 
    $rootScope.$on('$routeChangeSuccess', function(_, current) { 
     document.title = current.$$route.title; 
    }); 
}]);

है।

स्रोत

2015-09-17 01:37:32

$ रूट का उपयोग कर कोणीय में पृष्ठ शीर्षक को कैसे बदलें प्रदाता

उत्तर

संबंधित मुद्दे