दिलचस्प पोस्ट
मैं कैसे अतिरिक्त सम्पत्ति के लिए कई सम्मिलित टेबल से हाइबरनेट मानचित्रण बनाऊँ? विशिष्ट डोमेन नाम से Google OAuth2.0 के साथ लॉगिन ईमेल प्रतिबंधित करें सर्विस स्टैक बनाम एएसपी.नेट वेब एपीआई मैं अपने लेआउट को क्षैतिज और लंबवत दोनों कैसे बना सकता हूं? रनटाइम पर जेनेरिक संग्रह प्रकार परम निर्दिष्ट करना पोस्टग्रेज़ में बल्क डालने का सबसे तेज़ तरीका क्या है? किसी दूसरे निर्माता से कॉल करें मैं SQL सर्वर क्वेरी में सप्ताहांत दिनों को कैसे बाहर कर सकता हूं? SDK Manager.exe काम नहीं करता है जावा फ़ाइल – एक फ़ाइल खोलें और इसे लिखें "कोई भी सकारात्मक पूर्णांक, 0 को छोड़कर" के लिए regex क्या है जेपीए हैशोड () / बराबर () दुविधा आईओ के लिए डेकोरेटर पैटर्न एंड्रॉइड में सत्र का रखरखाव करना (सर्वर साइड पर एप्लिकेशन को प्रमाणीकृत करना) पूर्ण स्क्रीन में कैमरा डिस्प्ले / पूर्वावलोकन पहलू अनुपात को बनाए नहीं रखता है – स्क्रीन स्क्रीन पर फिट होने के लिए छवि स्कूव, फैली हुई है

AngularJS आंशिक दृश्य के आधार पर कैसे हेडर को गतिशील रूप से बदलना है?

मैं एनजी-व्ह्यू का उपयोग कर रहा हूँ ताकि अंगूर्ण जेएस आंशिक दृश्य शामिल हो सकें, और मैं शामिल दृश्य पर आधारित पेज शीर्षक और एच 1 हेडर टैग को अपडेट करना चाहता हूं। ये आंशिक दृश्य नियंत्रकों के दायरे से बाहर हैं, और इसलिए मैं यह नहीं समझ सकता कि उन्हें नियंत्रकों में डेटा सेट करने के लिए कैसे बाँधना है।

अगर यह ASP.NET MVC था तो आप इसे करने के लिए @ViewBag का उपयोग कर सकते हैं, लेकिन मुझे AngularJS में समकक्ष नहीं पता है मैंने साझा सेवाओं, ईवेंट आदि के बारे में खोज की है, लेकिन अभी भी इसे काम नहीं कर पा रहा है मेरे उदाहरण को संशोधित करने का कोई भी तरीका है, इसलिए यह बहुत सराहना की जाएगी।

मेरा एचटीएमएल:

<html data-ng-app="myModule"> <head> <!-- include js files --> <title><!-- should changed when ng-view changes --></title> </head> <body> <h1><!-- should changed when ng-view changes --></h1> <div data-ng-view></div> </body> </html> 

मेरा जावास्क्रिप्ट:

 var myModule = angular.module('myModule', []); myModule.config(['$routeProvider', function($routeProvider) { $routeProvider. when('/test1', {templateUrl: 'test1.html', controller: Test1Ctrl}). when('/test2', {templateUrl: 'test2.html', controller: Test2Ctrl}). otherwise({redirectTo: '/test1'}); }]); function Test1Ctrl($scope, $http) { $scope.header = "Test 1"; /* ^ how can I put this in title and h1 */ } function Test2Ctrl($scope, $http) { $scope.header = "Test 2"; } 

वेब के समाधान से एकत्रित समाधान "AngularJS आंशिक दृश्य के आधार पर कैसे हेडर को गतिशील रूप से बदलना है?"

आप <html> स्तर पर नियंत्रक को परिभाषित कर सकते हैं

  <html ng-app="app" ng-controller="titleCtrl"> <head> <title>{{ Page.title() }}</title> ... 

आप सेवा बनाते हैं: Page और नियंत्रकों से संशोधित।

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

Page इंजेक्षन और नियंत्रकों से 'Page.setTitle ()' कॉल करें।

यहां ठोस उदाहरण दिया गया है: http://plnkr.co/edit/0e7T6l

यदि आप राउटिंग का उपयोग कर रहे हैं तो मुझे आपके पृष्ठ का शीर्षक सेट करने का एक अच्छा तरीका पता चला है:

जावास्क्रिप्ट:

 var myApp = angular.module('myApp', ['ngResource']) myApp.config( ['$routeProvider', function($routeProvider) { $routeProvider.when('/', { title: 'Home', templateUrl: '/Assets/Views/Home.html', controller: 'HomeController' }); $routeProvider.when('/Product/:id', { title: 'Product', templateUrl: '/Assets/Views/Product.html', controller: 'ProductController' }); }]); myApp.run(['$rootScope', function($rootScope) { $rootScope.$on('$routeChangeSuccess', function (event, current, previous) { $rootScope.title = current.$$route.title; }); }]); 

HTML:

 <!DOCTYPE html> <html ng-app="myApp"> <head> <title ng-bind="'myApp &mdash; ' + title">myApp</title> ... 

संपादित करें : कर्लिंग के बजाय ng-bind विशेषता का प्रयोग {{}} ताकि वे लोड पर नहीं दिखाए

ध्यान दें कि आप सीधे जावास्क्रिप्ट के साथ शीर्षक भी सेट कर सकते हैं, अर्थात,

 $window.document.title = someTitleYouCreated; 

इसमें डेटा बाध्यकारी नहीं है, लेकिन <html> टैग में ng-app लगाते समय समस्या निवारण हो सकता है। (उदाहरण के लिए, जेएसपी टेम्पलेट्स का उपयोग करके जहां <head> को एक जगह में परिभाषित किया गया है, फिर भी आपके पास एक से अधिक ऐप हैं।)

html तत्व पर ng-app घोषित करते हुए head और body दोनों के लिए रूट स्कोप प्रदान करता body

इसलिए आपके नियंत्रक में $rootScope और इस पर एक हेडर प्रॉपर्टी सेट करें:

 function Test1Ctrl($rootScope, $scope, $http) { $rootScope.header = "Test 1"; } function Test2Ctrl($rootScope, $scope, $http) { $rootScope.header = "Test 2"; } 

और अपने पृष्ठ में:

 <title ng-bind="header"></title> 

मॉड्यूल एन्जेलियस-व्यूहेड एक कस्टम निर्देश को केवल प्रति निर्देश के आधार पर शीर्षक सेट करने के लिए एक तंत्र दिखाता है।

यह या तो एक मौजूदा दृश्य तत्व पर लागू किया जा सकता है जिसका सामग्री पहले से ही दृश्य शीर्षक है:

 <h2 view-title>About This Site</h2> 

… या इसे एक स्वसंपूर्ण तत्व के रूप में इस्तेमाल किया जा सकता है, उस स्थिति में तत्व प्रस्तुत किए गए दस्तावेज़ में अदृश्य हो जाएगा और इसका उपयोग केवल दृश्य शीर्षक सेट करने के लिए किया जाएगा:

 <view-title>About This Site</view-title> 

इस निर्देश की सामग्री को देखने के रूप में रूट गुंजाइश में उपलब्ध कराया जाता है, इसलिए इसे किसी भी अन्य चर की तरह शीर्षक तत्व पर इस्तेमाल किया जा सकता है:

 <title ng-bind-template="{{viewTitle}} - My Site">My Site</title> 

इसका उपयोग किसी भी अन्य स्थान में किया जा सकता है जो रूट स्कोप को "देख" सकता है। उदाहरण के लिए:

 <h1>{{viewTitle}}</h1> 

यह समाधान एक ही तंत्र के माध्यम से शीर्षक को सेट करने की अनुमति देता है जिसका प्रयोग बाकी प्रस्तुति को नियंत्रित करने के लिए किया जाता है: AngularJS टेम्पलेट यह इस वर्तमान तर्क के साथ अव्यवस्था नियंत्रकों की आवश्यकता से बचा जाता है। नियंत्रक को कोई भी डेटा उपलब्ध कराया जाना चाहिए जो कि शीर्षक को सूचित करने के लिए उपयोग किया जाएगा, लेकिन टेम्पलेट अंतिम प्रस्तुति को प्रस्तुत करता है कि कैसे प्रस्तुत करता है, और सामान्य रूप से गुंजाइश डेटा तक बाइंड करने के लिए अभिव्यक्ति प्रक्षेप और फ़िल्टर का उपयोग कर सकते हैं।

(अस्वीकरण: मैं इस मॉड्यूल के लेखक हूं, लेकिन मैं इसे केवल उम्मीद में ही संदर्भित कर रहा हूं कि यह किसी और को इस समस्या को हल करने में सहायता करेगा।)

यह एक अनुकूल समाधान है जो मेरे लिए काम करता है जिसके लिए संसाधनों के विशिष्ट पेज खिताब को निर्धारित करने के लिए $ रूट स्कोप के नियंत्रक में इंजेक्शन की आवश्यकता नहीं होती है।

मास्टर टेम्पलेट में:

 <html data-ng-app="myApp"> <head> <title data-ng-bind="page.title"></title> ... 

रूटिंग कॉन्फ़िग में:

 $routeProvider.when('/products', { title: 'Products', templateUrl: '/partials/products.list.html', controller: 'ProductsController' }); $routeProvider.when('/products/:id', { templateUrl: '/partials/products.detail.html', controller: 'ProductController' }); 

और रन ब्लॉक में:

 myApp.run(['$rootScope', function($rootScope) { $rootScope.page = { setTitle: function(title) { this.title = title + ' | Site Name'; } } $rootScope.$on('$routeChangeSuccess', function(event, current, previous) { $rootScope.page.setTitle(current.$$route.title || 'Default Title'); }); }]); 

अंत में नियंत्रक में:

 function ProductController($scope) { //Load product or use resolve in routing $scope.page.setTitle($scope.product.name); } 

अगर आपको हाथों से पहले के खिताब पता हैं, तो जेकोरेस्का का समाधान सही है, लेकिन आपको संसाधन से प्राप्त होने वाले डेटा के आधार पर शीर्षक निर्धारित करना पड़ सकता है।

मेरे समाधान के लिए एक एकल सेवा की आवश्यकता है चूंकि रूटस्स्कोप सभी DOM तत्वों का आधार है, इसलिए हमें किसी तत्व का HTML नियंत्रक बनाने की आवश्यकता नहीं है जैसा कि किसी का उल्लेख है

Page.js

 app.service('Page', function($rootScope){ return { setTitle: function(title){ $rootScope.title = title; } } }); 

index.jade

 doctype html html(ng-app='app') head title(ng-bind='title') // ... 

सभी नियंत्रकों को शीर्षक बदलने की आवश्यकता है

 app.controller('SomeController', function(Page){ Page.setTitle("Some Title"); }); 

एक साफ तरीका है कि गतिशील शीर्षक या मेटा विवरण सेट करने की अनुमति। उदाहरण के तौर पर मैं यू-राउटर का उपयोग करता हूं, लेकिन आप उसी तरह एनजीआरयूटीई का उपयोग कर सकते हैं।

 var myApp = angular.module('myApp', ['ui.router']) myApp.config( ['$stateProvider', function($stateProvider) { $stateProvider.state('product', { url: '/product/{id}', templateUrl: 'views/product.html', resolve: { meta: ['$rootScope', '$stateParams', function ($rootScope, $stateParams) { var title = "Product " + $stateParams.id, description = "Product " + $stateParams.id; $rootScope.meta = {title: title, description: description}; }] // Or using server side title and description meta: ['$rootScope', '$stateParams', '$http', function ($rootScope, $stateParams, $http) { return $http({method: 'GET', url: 'api/product/ + $stateParams.id'}) .then (function (product) { $rootScope.meta = {title: product.title, description: product.description}; }); }] } controller: 'ProductController' }); }]); 

HTML:

 <!DOCTYPE html> <html ng-app="myApp"> <head> <title ng-bind="meta.title + ' | My App'">myApp</title> ... 

वैकल्पिक रूप से, यदि आप ui-router का उपयोग कर रहे हैं:

index.html

 <!DOCTYPE html> <html ng-app="myApp"> <head> <title ng-bind="$state.current.data.title || 'App'">App</title> 

मार्ग

 $stateProvider .state('home', { url: '/', templateUrl: 'views/home.html', data: { title: 'Welcome Home.' } } 

यदि आपके पास शीर्षक तत्व (जैसे asp.net वेब फ़ॉर्म) पर नियंत्रण नहीं है, तो आप उपयोग कर सकते हैं

 var app = angular.module("myApp") .config(function ($routeProvider) { $routeProvider.when('/', { title: 'My Page Title', controller: 'MyController', templateUrl: 'view/myView.html' }) .otherwise({ redirectTo: '/' }); }) .run(function ($rootScope) { $rootScope.$on("$routeChangeSuccess", function (event, currentRoute, previousRoute) { document.title = currentRoute.title; }); }); 

कस्टम इवेंट-आधारित समाधान

यहाँ एक अन्य दृष्टिकोण है जो दूसरों द्वारा यहां वर्णित नहीं किया गया है (इस लेखन के अनुसार)।

आप ऐसे कस्टम इवेंट का उपयोग कर सकते हैं जैसे:

 // your index.html template <html ng-app="app"> <head> <title ng-bind="pageTitle">My App</title> // your main app controller that is declared on the <html> element app.controller('AppController', function($scope) { $scope.$on('title-updated', function(newTitle) { $scope.pageTitle = newTitle; }); }); // some controller somewhere deep inside your app mySubmodule.controller('SomeController', function($scope, dynamicService) { $scope.$emit('title-updated', dynamicService.title); }); 

इस दृष्टिकोण में अतिरिक्त सेवाओं की आवश्यकता नहीं होती है और इसके लिए प्रत्येक नियंत्रक को इंजेक्शन लगाने की ज़रूरत होती है, जिसे शीर्षक निर्धारित करने की आवश्यकता होती है, और यह भी नहीं है कि (एबी) $rootScope उपयोग करें यह आपको गतिशील शीर्षक (कोड उदाहरण के अनुसार) को सेट करने की अनुमति देता है, जो रूटर के कॉन्फ़िग ऑब्जेक्ट पर कस्टम डेटा विशेषताओं का उपयोग करना संभव नहीं है (जहां तक ​​मुझे कम से कम पता है)।

इनमें से कोई भी जवाब सहज नहीं था, इसलिए मैंने ऐसा करने के लिए एक छोटा निर्देश बनाया। इस तरह से आप पृष्ठ में शीर्षक को घोषित करने की अनुमति देते हैं, जहां सामान्य रूप से ऐसा होता है, और इसे गतिशील रूप में भी अनुमति देता है

 angular.module('myModule').directive('pageTitle', function() { return { restrict: 'EA', link: function($scope, $element) { var el = $element[0]; el.hidden = true; // So the text not actually visible on the page var text = function() { return el.innerHTML; }; var setTitle = function(title) { document.title = title; }; $scope.$watch(text, setTitle); } }; }); 

आपको बिल्कुल मिलान करने के लिए मॉड्यूल का नाम बदलने की ज़रूरत होगी।

इसका इस्तेमाल करने के लिए, इसे केवल आपके विचार में डालें, जितना आप नियमित टैग के लिए करेंगे:

 <page-title>{{titleText}}</page-title> 

यदि आप इसे गतिशील द्वारा की आवश्यकता नहीं है, तो आप केवल सादा पाठ भी शामिल कर सकते हैं:

 <page-title>Subpage X</page-title> 

वैकल्पिक रूप से, आप इसे अधिक आईई अनुकूल बनाने के लिए एक विशेषता का उपयोग कर सकते हैं:

 <div page-title>Title: {{titleText}}</div> 

आप पाठ्यक्रम के टैग में जो भी टेक्स्ट चाहते हैं, उसमें अंगुलर कोड शामिल कर सकते हैं। इस उदाहरण में, यह $scope.titleText के लिए जो भी नियंत्रक कस्टम-शीर्षक टैग में वर्तमान में दिखाई देगा

बस सुनिश्चित करें कि आपके पृष्ठ पर एकाधिक पृष्ठ-शीर्षक टैग नहीं हैं, या वे एक-दूसरे को दबाएंगे

यहां प्लंकर का उदाहरण http://plnkr.co/edit/nK63te7BSbCxLeZ2ADHV शीर्षक परिवर्तन को देखने के लिए आपको ज़िप डाउनलोड करना होगा और इसे स्थानीय रूप से चलाया जाएगा।

शीर्षक परिवर्तन करने के लिए यहां एक अलग तरीका है फैक्ट्री फ़ंक्शन के रूप में संभवतः स्केलेबल के रूप में नहीं (जो असीमित पृष्ठों को संभाला जा सकता है) परन्तु मेरे लिए यह समझना आसान था:

मेरी index.html में मैंने ऐसा शुरू किया:

  <!DOCTYPE html> <html ng-app="app"> <head> <title ng-bind-template="{{title}}">Generic Title That You'll Never See</title> 

फिर मैंने एक आंशिक "nav.html" कहा:

 <div ng-init="$root.title = 'Welcome'"> <ul class="unstyled"> <li><a href="#/login" ng-click="$root.title = 'Login'">Login</a></li> <li><a href="#/home" ng-click="$root.title = 'Home'">Home</a></li> <li><a href="#/admin" ng-click="$root.title = 'Admin'">Admin</a></li> <li><a href="#/critters" ng-click="$root.title = 'Crispy'">Critters</a></li> </ul> </div> 

तब मैं "index.html" पर वापस गया और एनएवी-एनएफ़-एनएफ़-इन और एनआईजी-दृश्य को मेरे आंशिक भाग के लिए जोड़ दिया।

 <body class="ng-cloak" ng-controller="MainCtrl"> <div ng-include="'partials/nav.html'"></div> <div> <div ng-view></div> </div> 

ध्यान दें कि एनजी-क्लोक? इस उत्तर के साथ करने के लिए इसके पास कुछ भी नहीं है, लेकिन जब तक यह लोड हो रहा है, एक अच्छा टच नहीं है, तब तक पृष्ठ को छुपाता है 🙂 यहां जानें: अंगरीज – एनजी-क्लॉक / एनजी-शो तत्वों झपकी

यहां बुनियादी मॉड्यूल है मैंने इसे "app.js" नामक एक फ़ाइल में डाल दिया है:

 (function () { 'use strict'; var app = angular.module("app", ["ngResource"]); app.config(function ($routeProvider) { // configure routes $routeProvider.when("/", { templateUrl: "partials/home.html", controller:"MainCtrl" }) .when("/home", { templateUrl: "partials/home.html", controller:"MainCtrl" }) .when("/login", { templateUrl:"partials/login.html", controller:"LoginCtrl" }) .when("/admin", { templateUrl:"partials/admin.html", controller:"AdminCtrl" }) .when("/critters", { templateUrl:"partials/critters.html", controller:"CritterCtrl" }) .when("/critters/:id", { templateUrl:"partials/critter-detail.html", controller:"CritterDetailCtrl" }) .otherwise({redirectTo:"/home"}); }); }()); 

यदि आप मॉड्यूल के अंत की ओर देखते हैं, तो आप देखेंगे कि मेरे पास एक क्रitter-विवरण पृष्ठ है: id। यह एक आंशिक है जिसे क्रिस्पी क्रिटर्स पृष्ठ से उपयोग किया जाता है। [कॉर्नी, मुझे पता है – शायद यह एक ऐसी साइट है जो सभी प्रकार के चिकन सोने की डली का जश्न मनाता है;) वैसे भी, जब कोई उपयोगकर्ता किसी भी लिंक पर क्लिक करता है तो आप शीर्षक को अपडेट कर सकते हैं, इसलिए मेरे मुख्य क्रिस्पी क्रिटर्स पृष्ठ में क्रitter-विवरण पृष्ठ की ओर जाता है, वह वह जगह है जहां $ root.title अद्यतन जाना होगा, जैसा आपने ऊपर एनएचओएवी में देखा था:

 <a href="#/critters/1" ng-click="$root.title = 'Critter 1'">Critter 1</a> <a href="#/critters/2" ng-click="$root.title = 'Critter 2'">Critter 2</a> <a href="#/critters/3" ng-click="$root.title = 'Critter 3'">Critter 3</a> 

माफ करना बहुत हवा है लेकिन मैं एक ऐसा पद पसंद करता हूं जो इसे प्राप्त करने और चलने के लिए पर्याप्त विस्तार प्रदान करता है। ध्यान दें कि AngularJS डॉक्स में उदाहरण पृष्ठ पुराना है और एनजी-बाइंड-टेम्पलेट का 0.9 संस्करण दिखाता है। आप देख सकते हैं कि यह बहुत भिन्न नहीं है

पश्चात: आप यह जानते हैं लेकिन यह किसी और के लिए है; index.html के निचले भाग में, एक में मॉड्यूल के साथ app.js शामिल होना आवश्यक है:

  <!-- APP --> <script type="text/javascript" src="js/app.js"></script> </body> </html> 

ऐसे परिदृश्यों के लिए कि आपके पास title टैग वाला एक ngApp नहीं है, बस एक नियंत्रक के लिए एक सेवा इंजेक्ट करें, जिसे विंडो शीर्षक सेट करना होगा।

 var app = angular.module('MyApp', []); app.controller('MyController', function($scope, SomeService, Title){ var serviceData = SomeService.get(); Title.set("Title of the page about " + serviceData.firstname); }); app.factory('SomeService', function ($window) { return { get: function(){ return { firstname : "Joe" }; } }; }); app.factory('Title', function ($window) { return { set: function(val){ $window.document.title = val; } }; }); 

कार्यरत उदाहरण … http://jsfiddle.net/8m379/1/

$rootScope का उपयोग करके सरल और गंदे तरीके $rootScope :

 <html ng-app="project"> <head> <title ng-bind="title">Placeholder title</title> 

अपने नियंत्रकों में, जब आपके पास शीर्षक बनाने के लिए आवश्यक डेटा है, तो करें:

 $rootScope.title = 'Page X' 

जब मुझे इसे हल करना पड़ा, तो मैं पेज के html टैग पर ng-app डाल सका, इसलिए मैंने इसे सेवा के साथ हल किया:

 angular.module('myapp.common').factory('pageInfo', function ($document) { // Public API return { // Set page <title> tag. Both parameters are optional. setTitle: function (title, hideTextLogo) { var defaultTitle = "My App - and my app's cool tagline"; var newTitle = (title ? title : defaultTitle) + (hideTextLogo ? '' : ' - My App') $document[0].title = newTitle; } }; }); 

जबकि अन्य में बेहतर तरीके हो सकते हैं, मैं अपने नियंत्रकों में $ rootScope का उपयोग करने में सक्षम था, क्योंकि मेरे प्रत्येक दृश्य / टेम्पलेट में एक अलग नियंत्रक है I प्रत्येक नियंत्रक में आपको $ rootScope इंजेक्षन करने की आवश्यकता होगी हालांकि यह आदर्श नहीं है, यह मेरे लिए काम कर रहा है, इसलिए मैंने सोचा कि मैं इसे पास करना चाहिए। यदि आप पृष्ठ का निरीक्षण करते हैं, तो यह शीर्षक टैग पर एनजी-बाध्यकारी जोड़ता है।

उदाहरण नियंत्रक:

 myapp.controller('loginPage', ['$scope', '$rootScope', function ($scope, $rootScope) { // Dynamic Page Title and Description $rootScope.pageTitle = 'Login to Vote'; $rootScope.pageDescription = 'This page requires you to login'; }]); 

उदाहरण सूचकांक हैडर:

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="description" content="{{pageDescription}}"> <meta name="author" content=""> <link rel="shortcut icon" href="../../assets/ico/favicon.ico"> <base href="/"> <title>{{pageTitle}}</title> 

आप पृष्ठ शीर्षक और पृष्ठ विवरण डायनेमिक मानों पर सेट भी कर सकते हैं, जैसे कि एक REST कॉल से डेटा वापस करना:

  $scope.article = restCallSingleArticle.get({ articleID: $routeParams.articleID }, function() { // Dynamic Page Title and Description $rootScope.pageTitle = $scope.article.articletitle; $rootScope.pageDescription = $scope.article.articledescription; }); 

दोबारा, दूसरों के पास इस पर पहुंचने के बारे में बेहतर विचार हो सकते हैं, लेकिन जब से मैं पूर्व-रेंडरिंग का उपयोग कर रहा हूं, मेरी जरूरतें पूरी हो रही हैं

अपने समाधान के लिए टश शिमायामा के लिए धन्यवाद
मैंने सोचा था कि यह सेवा को सीधे $scope में डाल देने के लिए इतना साफ नहीं था, इसलिए इस पर मेरा मामूली बदलाव है: http://plnkr.co/edit/QJbuZZnZEDOBcYrJXWWs

नियंत्रक (मूल उत्तर में मुझे थोड़ा सा लग रहा था) एक एक्शनबियर ऑब्जेक्ट बनाता है, और यह एक $ दायरे में भर जाता है
ऑब्जेक्ट वास्तव में सेवा पूछताछ के लिए जिम्मेदार है। यह टेम्पलेट URL सेट करने के लिए $ दायरे से भी छुपाता है, जो कि यूआरएल को सेट करने के बजाय अन्य नियंत्रकों के लिए उपलब्ध है।

श्री हैश का अब तक का सबसे अच्छा जवाब था, लेकिन नीचे दिए गए समाधान निम्न लाभ जोड़कर मेरे लिए आदर्श (मेरे लिए) बनाते हैं:

  • कोई घड़ी नहीं जोड़ती है, जो चीजों को धीमा कर सकती है
  • वास्तव में स्वचालित करता है कि मैं नियंत्रक में क्या कर सकता था, फिर भी
  • फिर भी मुझे नियंत्रक से पहुंच देता है यदि मैं अभी भी चाहता हूं।
  • अतिरिक्त इंजेक्शन नहीं

राउटर में:

  .when '/proposals', title: 'Proposals', templateUrl: 'proposals/index.html' controller: 'ProposalListCtrl' resolve: pageTitle: [ '$rootScope', '$route', ($rootScope, $route) -> $rootScope.page.setTitle($route.current.params.filter + ' ' + $route.current.title) ] 

रन ब्लॉक में:

 .run(['$rootScope', ($rootScope) -> $rootScope.page = prefix: '' body: ' | ' + 'Online Group Consensus Tool' brand: ' | ' + 'Spokenvote' setTitle: (prefix, body) -> @prefix = if prefix then ' ' + prefix.charAt(0).toUpperCase() + prefix.substring(1) else @prifix @body = if body then ' | ' + body.charAt(0).toUpperCase() + body.substring(1) else @body @title = @prefix + @body + @brand ]) 

कोणीय-यू-राउटर के लिए सरलतापूर्ण समाधान:

HTML:

 <html ng-app="myApp"> <head> <title ng-bind="title"></title> ..... ..... </head> </html> 

App.js> myApp.config ब्लॉक

 $stateProvider .state("home", { title: "My app title this will be binded in html title", url: "/home", templateUrl: "/home.html", controller: "homeCtrl" }) 

App.js> myApp.run

 myApp.run(['$rootScope','$state', function($rootScope,$state) { $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) { $rootScope.title = $state.current.title; console.log($state); }); }]); 

मैंने पाया कि बेहतर और गतिशील समाधान चर परिवर्तनों का पता लगाने के लिए $ वॉच का उपयोग करना है और फिर शीर्षक को अपडेट करना है।