অ্যাঙ্গুলারজেএস আংশিক দৃশ্যের ভিত্তিতে শিরোনাম কীভাবে পরিবর্তনশীল?

411

আমি AngularJS আংশিক দৃষ্টিভঙ্গি অন্তর্ভুক্ত করতে এনজি-ভিউ ব্যবহার করছি এবং আমি অন্তর্ভুক্ত দৃশ্যের ভিত্তিতে পৃষ্ঠার শিরোনাম এবং এইচ 1 শিরোনাম ট্যাগগুলি আপডেট করতে চাই। এগুলি যদিও আংশিক দর্শনীয় নিয়ন্ত্রকদের সুযোগের বাইরে নয় এবং তাই আমি কীভাবে কন্ট্রোলারে থাকা ডেটা সেটগুলিতে এগুলি আবদ্ধ করতে পারি তা বুঝতে পারি না।

এটি যদি এএসপি.নেট এমভিসি হয় তবে আপনি এটি করতে @ ভিউব্যাগ ব্যবহার করতে পারেন, তবে আমি AngularJS এর ​​সমতুল্য জানি না। আমি ভাগ করা পরিষেবা, ইভেন্ট ইত্যাদি সম্পর্কে অনুসন্ধান করেছি কিন্তু এখনও এটি কাজ করতে পারি না get আমার উদাহরণটি পরিবর্তন করার যে কোনও উপায়ে যাতে এটি কার্যকর হয় তেমন প্রশংসা হবে।

আমার এইচটিএমএল:

<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"; }
javascript  angularjs  templates  partial-views  angular-routing 
— Mikel
সূত্র
এই মন্তব্যটি হয়তো দেরীতে হলেও আমি যুক্ত করতে চাই। cssfacts.com/simple-dynamic-meta-tags-in-angularjs এটি গতিশীল মেটা সেট করার জন্য দরকারী। আপনি কেবল আপনার $ রুটস্কোপ মেটা ভেরিয়েবলটি পরিবর্তন করবেন।
— কামুরান সনেসেক

উত্তর:

342

আপনি <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 ()'।

এখানে এর দৃ concrete ় উদাহরণ: http://plnkr.co/edit/0e7T6l

— বাজে কথা
সূত্র
11
uhmm ... আমি নিশ্চিত যদি একটি সেবা $ সুযোগ মধ্যে সোজা স্থাপন বিবেচনা করা হয় নই চমৎকার AngularJS স্থাপত্যে। Control স্কোপটিতে একটি নিয়ামক ফাংশন স্থাপন করা আরও ভাল হতে পারে এবং তারপরে এই ফাংশনটিকে পরিষেবাটি জিজ্ঞাসা করতে দিন।
— সুপারজোজ 16
11
এই উদাহরণটি ছিল ভয়ঙ্কর। আমার একটি ফলোআপ রয়েছে যদিও প্রাথমিক লোডের উপর আপনি শিরোনামে (খুব তাড়াতাড়ি) {{Page.title ()।} টেক্সটটি দেখতে পারেন। আমি মনে করি না যে আপনি এনজি-ক্লোব ব্যবহার করতে পারবেন যেহেতু এটি শরীরে নেই। এড়াতে কোনও পরামর্শ?
— আর্থার ফ্র্যাঙ্কেল
52
@ArthurFrankel শুধু ব্যবহার NG-বেঁধে (যেমন NG-বেঁধে = "Page.title ()")
— পায়াস Uzamere
2
বা আমরা শিরোনাম ট্যাগে নিয়ামক নির্দিষ্ট করতে পারি, এইচটিএমএল শিরোনামে গ্লোবাল কন্ট্রোলারের প্রয়োজন নেই: <শিরোনাম এনজি-কন্ট্রোলার = "টাইটেল সিটিএলএল>>। {পেজ টাইটেল ()}} </title>
— দিমিত্রি আলগাজিন
6
আমি ব্যক্তিগতভাবে $rootScopeঅতিরিক্ত নিয়ামক তৈরির পরিবর্তে শিরোনাম সেট করতে পছন্দ করি ।
— ডিডিএ
634

আপনি যদি রাউটিং ব্যবহার করছেন তবে আমি আপনার পৃষ্ঠার শিরোনাম সেট করার একটি দুর্দান্ত উপায় সন্ধান করেছি:

javascript:

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;
    });
}]);

এইচটিএমএল:

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

সম্পাদনা করুন : ng-bindকার্লিগুলির পরিবর্তে বৈশিষ্ট্যটি ব্যবহার করে {{}}যাতে তারা লোড না দেখায়

— jkoreska
সূত্র
11
ঠিক আছে, তবে আপনার উদাহরণটি কীভাবে $ স্কোপ ভেরিয়েবল দ্বারা প্যারামিটারাইজড $ রুট চেঞ্জসুকসেসে শিরোনাম পরিবর্তন করবেন তা দেখায় না, যা @ পৃষ্ঠার পরিষেবা ব্যবহার করে টোশের উদাহরণ ব্যবহার করে। সুতরাং আপনি সেট করতে পারেন title = "Blog"কিন্তু না title = '{{"Blog post " + post.title}}'।
— এরিক ড্রেচেল
10
@felix তোমার মত শিরোনাম অ্যাক্সেস করতে পারেন current.titleএছাড়াও
— Eldelshell
8
$ রুটস্কোপ.টাইটেল = কারেন্ট $ রুট.টাইটেল;
— দোবল
7
আমি সবেমাত্র আমার কৌণিক সংস্করণটি বেশ কয়েকটি সংস্করণ (1.0.5 থেকে 1.2.7) আপগ্রেড করেছি এবং এটি আমার কোডের জন্য আমাকে ভেঙে দিয়েছে। আমি current.$routeপুরানো কোড ব্যবহার করছিলাম এবং এটি কাজ করছিল। আপগ্রেডের সাথে, রুটে দ্বিগুণ দরকার needed current.$$route
— টাইলার ফোরসিথে
6
উত্তরটিতে কখন দেখতে পাবেন '/Product/:id'। :idএই পদ্ধতির সাথে মান রাখার কোনও উপায় আছে কি ? আমি চেষ্টা করেছি title: function(params){return params.id;}কিন্তু কাজ করে না ... সম্ভবত ব্যবহার করছি resolve?
— mickaelb91
190

নোট করুন যে আপনি সরাসরি জাভাস্ক্রিপ্টের সাহায্যে শিরোনাম সেট করতে পারেন,

$window.document.title = someTitleYouCreated;

এই তথ্য বাঁধাই নেই, কিন্তু এটা যথেষ্ট যখন নির্বাণ ng-appমধ্যে <html>ট্যাগটি সমস্যাযুক্ত। (উদাহরণস্বরূপ, জেএসপি টেম্পলেটগুলি ব্যবহার করে যেখানে <head>ঠিক এক জায়গায় সংজ্ঞা দেওয়া হয়েছে, তবুও আপনার একাধিক অ্যাপ রয়েছে))

— broc.seib
সূত্র
5
এটি আমার জন্য ইন্টারনেট এক্সপ্লোরারে কাজ করার একমাত্র উপায় ছিল, অন্যান্য ব্রাউজারগুলিতে অন্যান্য পদ্ধতিগুলি কাজ করেছিল
— মার্টেন
4
মার্টেন পূর্বেই উল্লেখ করা হয়েছে এই মাত্র ie7 এবং IE8 যে কাজ পন্থা
— ডাকাতি
33
আশ্চর্যজনকভাবে কীভাবে লোকেরা পিছিয়ে যেতে পারে না এবং স্কোপ এবং কারখানাগুলি ছাড়াই এই জিনিসটি সহজেই কীভাবে করা যায় তা দেখুন
— redben
7
অবিশ্বাস্য. এটি অন্য সমস্ত শেননিগ্যানদের উল্লেখ করার চেয়ে সহজ ছিল। ধন্যবাদ!
— লিওনার্ড টিও
8
প্লেইন 'উইন্ডো' ব্যবহার করা ভাল - এটি সরাসরি ডমটিতে অভিনয় করে। '$ উইন্ডো' একটি কৌণিক জিনিস এবং এটি ব্যবহারের জন্য আপনাকে এটিকে ইনজেক্ট করতে হবে। যে কোনও উপায়ে কাজ করবে।
— broc.seib
119

উপাদানটির ng-appবিষয়ে ঘোষণা htmlউভয় headএবং এর জন্য মূল সুযোগ সরবরাহ করে 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>
— অ্যান্ডি হিচম্যান
সূত্র
8
আমার মতামত সেরা উত্তর। গৃহীত উত্তরে বর্ণিত হিসাবে এনজি-অ্যাপ্লিকেশন স্তরে একটি নিয়ামক রাখা এই ক্ষেত্রে অকেজো।
— নিকোলাস জেনেল
1
আমি এই সমাধানটি কতটা হালকা ওজনের তা পছন্দ করি এবং এটি $$ বৈশিষ্ট্যগুলি ব্যবহার করা এড়িয়ে যায়
— tedwards947
গৃহীত উত্তর অপ্রয়োজনীয় জটিলতা এবং ঝুঁকি যুক্ত করে। এই সংস্করণটি এটিকে ভেরিয়েবল সেট করার মতো সহজ করে তোলে।
— বিশেষ0
3
আপনি যদি $ রুটস্কোপটি ব্যবহারে মৃত হয়ে থাকেন তবে আমি কমপক্ষে এটিকে কোনও পরিষেবাতে বের করে আনব যাতে আপনার নিয়ামকটিতে আপনার কাছে S রুটস্কোপ না থাকে।
— মাইকেল জে। ক্যালকিন্স
3
আমি এই সমাধান ব্যবহার করতে চান কিন্তু আমি জানতে আগ্রহী তা ব্যবহার করে সুফল রয়েছে am document.title = "App";
— পুনর্বার
43

মডিউল অ্যাঙ্গুলারজ-ভিউহেড কেবলমাত্র একটি কাস্টম নির্দেশিকা ব্যবহার করে প্রতি-ভিউ ভিত্তিতে শিরোনাম সেট করার ব্যবস্থা দেখায়।

এটি হয় এমন একটি বিদ্যমান ভিউ উপাদানটিতে প্রয়োগ করা যেতে পারে যার সামগ্রী ইতিমধ্যে দর্শন শিরোনাম:

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

... বা এটি স্ট্যান্ডেলোন উপাদান হিসাবে ব্যবহার করা যেতে পারে, সেক্ষেত্রে রেন্ডার করা ডকুমেন্টে উপাদানটি অদৃশ্য হয়ে যাবে এবং কেবলমাত্র দর্শন শিরোনাম সেট করতে ব্যবহার করা হবে:

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

এই নির্দেশের বিষয়বস্তু মূল স্কোপ হিসাবে উপলভ্য করা হয়েছে viewTitle, সুতরাং এটি অন্যান্য ভেরিয়েবলের মতো শিরোনাম উপাদানটিতে ব্যবহার করা যেতে পারে:

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

এটি অন্য যে কোনও স্পটেও ব্যবহার করা যেতে পারে যা মূল স্কোপটি "দেখতে" পারে। উদাহরণ স্বরূপ:

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

এই সমাধানটি একই উপকরণের মাধ্যমে শিরোনাম সেট করার অনুমতি দেয় যা বাকি উপস্থাপনা নিয়ন্ত্রণ করতে ব্যবহৃত হয়: AngularJS টেমপ্লেট। এটি এই বর্তমানের যুক্তি সহ বিশৃঙ্খলা নিয়ন্ত্রণকারীদের এড়ানো প্রয়োজন। নিয়ামককে শিরোনামটি অবহিত করতে যে কোনও ডেটা উপলব্ধ করা দরকার , তবে টেমপ্লেট কীভাবে এটি উপস্থাপন করবে সে সম্পর্কে চূড়ান্ত সিদ্ধান্ত নিয়েছে এবং স্কোপ ডেটা স্বাভাবিক হিসাবে আবদ্ধ করতে এক্সপ্রেশন ইন্টারপোলেশন এবং ফিল্টার ব্যবহার করতে পারে।

(অস্বীকৃতি: আমি এই মডিউলটির লেখক, তবে আমি এখানে কেবলমাত্র এই আশায় এটি উল্লেখ করছি যে এটি অন্য কাউকে এই সমস্যা সমাধানে সহায়তা করবে))

— মার্টিন অ্যাটকিনস
সূত্র
4
বিশ্বাস করা যায় না এই সমাধানটি আরও বেশি বাড়ানো হয়নি। অন্যান্যগুলির বেশিরভাগই সত্যই খারাপ ডিজাইনের পছন্দ।
— মার্টিন ওয়াওরুছ
সম্মত, এটি শীর্ষ সমাধান হওয়া উচিত। শিরোনামটি সেট করার জন্য পৃষ্ঠা স্তরে একটি নিয়ামক ঘোষণার চেয়ে আমি এটি অনেক বেশি পছন্দ করি। এফওয়াইআই: এটি কৌণিক v1.3.2 এবং কৌণিক-রুট-বিভাগটি v1.3.3 এর সাথে ব্যবহার করে এবং এটি একটি কবজির মতো কাজ করছে।
— নাট বারবেটিনি
আমি এই সমাধানটি সমর্থন করি;)
— jkoreska
3
আমি এখানে আমার ব্লগে অ্যাংুলারজ-ভিউহেড এবং আরও একটি সম্পর্কিত ধারণা সম্পর্কে আরও কিছু লিখেছি: আপাতদৃষ্টিতে.ম.উক
— মার্টিন অ্যাটকিনস
যদি শীর্ষ-স্তরের এবং উপ-স্তরের দৃশ্যে একই ভিউটিকে পুনরায় ব্যবহার করা হয়, তবে এখনও কেউ এনজি-ইফ দিয়ে দর্শন শিরোনাম ব্যবহার করতে পারে, যেমন: <h4 ng-if = "$ state.includes ('কিছু-রাষ্ট্র')" ভিউ-শিরোনাম> {{...}} </h4> <h4 এনজি-if = "! $ state.includes ('কিছু-রাষ্ট্র')" "> এর জন্য বিশদ বিবরণ ...}} </ h4 >
— 15'7
32

এখানে এমন একটি অভিযোজিত সমাধান যা আমার পক্ষে কাজ করে যা সংস্থান নির্দিষ্ট পৃষ্ঠার শিরোনাম সেট করার জন্য নিয়ামকগুলিতে $ rootScope এর ইনজেকশন লাগবে না।

মাস্টার টেমপ্লেটে:

<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);
}
— মিঃ হাশ
সূত্র
1
প্রোডাক্টকন্ট্রোলারে সেট করা শিরোনাম ($ স্কোপ.পেজ.সেটিটেল) C রুটস্কোপ over দ্বারা ওভাররাইড করা হচ্ছে C অন ('$ রুটচেন্জস্যাক্সেস'। রুটস্কোপ। $ অন ('$ রুটচ্যাঞ্জস্টার্ট'-এ এই ক্ষেত্রে নিরাপদ
— ক্রিস্টো অুন
@ মিঃ-হ্যাশ: আমি এখানে একটি ছোট সামঞ্জস্যের পরামর্শ দিচ্ছি, প্রচুর রুটযুক্ত কৌণিক প্রকল্পগুলির জন্য উপযুক্ত তবে শিরোনাম ছাড়াই। এটি নিয়ামকের নাম থেকে শিরোনাম উত্পন্ন করবে, যদি পথে কোনও শিরোনাম সংজ্ঞায়িত না হয়:$rootScope.page.setTitle(current.$$route.title || current.$$route.controller.replace('Ctrl', ''));
— মিখাইল-টি
1
এই হিসাবে আউটপুট স্যানিটাইজ করতে মনে রাখবেন:this.title = title.replace('<', '&lt;').replace('>', '&gt;').replace(' & ', ' &amp; ') + ' | Site Name';
— হেনরিক স্টেনবেক
আমি অপরিবর্তিত ত্রুটি পেয়েছি তাই আমি সর্বশেষ বিটটি এতে পরিবর্তন করেছি: $ rootScope.page.title = কারেন্ট $$ রুট? কারেন্ট। $$ রুট টাইটেল + '| সাইটের নাম ':' সাইটের নাম ';
— অ্যান্ডি
15

হাতের আগে শিরোনামগুলি জানা থাকলে জেকোরস্কার সমাধানটি সঠিক, তবে আপনার কোনও উত্স থেকে প্রাপ্ত ডেটার উপর ভিত্তি করে আপনাকে শিরোনাম সেট করতে হবে etc.

আমার সমাধানটির জন্য একটি একক পরিষেবা প্রয়োজন। যেহেতু রুটস্কোপটি সমস্ত ডিওএম উপাদানগুলির ভিত্তি, তাই আমাদের উল্লেখ করা কারোর মতো এইচটিএমএল উপাদানটিতে একটি নিয়ামক রাখার দরকার নেই we

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");
});
— Deminetix
সূত্র
ছোট সমস্যা, যখন আপনি একটি পৃষ্ঠা রিফ্রেশ করেন, তখন আপনার ট্যাব নামে আপনি '{{শিরোনাম}}' দেখতে পাবেন এবং পৃষ্ঠাটি রেন্ডার হওয়ার পরে আপনি কেবল 'কিছু শিরোনাম' দেখতে পাবেন। কারখানার সাথে সমাধানটির তেমন আচরণ নেই
— দিমিত্রি আলগাজিন
5
পরিবর্তে {{title}}ব্যবহার করুনng-bind='title'
— ফ্যারাডাক্স
1
@ ফারাডক্সের সাথে সম্মত হন ... ব্যবহার ng-bindকরে শিরোনামটি বাস্তবে মূল্যায়নের আগে প্রাক- বিরক্তিকৃত সিনট্যাক্স প্রদর্শন করা থেকে বাধা দেয়। +100
— শেঠ
11

একটি পরিষ্কার উপায় যা গতিশীলভাবে শিরোনাম বা মেটা বিবরণ সেট করার অনুমতি দেয়। উদাহরণস্বরূপ আমি ইউআই-রাউটার ব্যবহার করি তবে আপনি একইভাবে এনজিআরট ব্যবহার করতে পারেন।

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'
        });
    }]);

এইচটিএমএল:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title ng-bind="meta.title + ' | My App'">myApp</title>
...
— অ্যালেক্স সোরোকা
সূত্র
8

বিকল্পভাবে, আপনি যদি ইউআই-রাউটার ব্যবহার করছেন :

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.'
      }
  }
— নাথান কোট
সূত্র
2
আমি এটি কাজ করতে পারি না .. আমি ui-routerআমার রাষ্ট্রের উপর ভিত্তি করে ইউআরএল এবং সামগ্রী আপডেট করেছি এবং আমার কোনও ত্রুটি বা সতর্কতা নেই, তবে আমি রাষ্ট্রের কনফিগারেশনের কোনও অংশের মাধ্যমে অ্যাক্সেস করতে পারছি না $state.current.[...]। এটি করার জন্য আপনি কোন সংস্করণ ui-routerব্যবহার করেছেন?
উত্তরে আমার "রানটাইম কনফিগারেশন" সম্পাদনা আমার উপরের মন্তব্যে উল্লিখিত সমস্যাটি সমাধান করে। :) যদিও এটি করার আরও ভাল উপায় আছে তবে আমি ধারণাগুলির জন্য উন্মুক্ত।
এটি আমার পক্ষে কাজ করে না এবং এপিআই ডক্সে 'শিরোনাম' পাওয়া যায় না - এটি কি এখনও সমর্থিত?
— গ্রাহামএফ
7

কাস্টম ইভেন্ট ভিত্তিক সমাধান

এখানে অন্য পদ্ধতি যা এখানে অন্যরা উল্লেখ করেনি (এই লেখার মতো)।

আপনি কাস্টম ইভেন্টগুলি এর মতো ব্যবহার করতে পারেন:

// 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। এটি আপনাকে একটি গতিশীল শিরোনাম সেট করতে দেয় (কোড উদাহরণ হিসাবে), যা রাউটারের কনফিগার অবজেক্টে কাস্টম ডেটা অ্যাট্রিবিউট ব্যবহার করা সম্ভব নয় (যতদূর আমি কমপক্ষে জানি)।

— মাইকেল ব্রোমলি
সূত্র
5

দৃশ্যের জন্য যে আপনার কাছে কোনও এনজিএপ নেই যেটিতে titleট্যাগ রয়েছে , উইন্ডো শিরোনাম সেট করতে হবে এমন নিয়ামককে কেবল একটি পরিষেবা ইনজেক্ট করুন।

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/

— JeremyWeir
সূত্র
5

আপনার যদি শিরোনাম উপাদানটির উপর নিয়ন্ত্রণ না থাকে (যেমন 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;
        });
    });
— আশিস
সূত্র
4

সহজ এবং নোংরা উপায় ব্যবহার করে $rootScope:

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

আপনার নিয়ন্ত্রকগুলিতে, যখন শিরোনাম তৈরির জন্য আপনার প্রয়োজনীয় ডেটা রয়েছে, তখন করুন:

$rootScope.title = 'Page X'
— user1338062
সূত্র
4

এই উত্তরগুলির কোনওটিই যথেষ্ট স্বজ্ঞাত বলে মনে হয়নি, তাই এটি করার জন্য আমি একটি ছোট নির্দেশ তৈরি করেছি। এইভাবে আপনি পৃষ্ঠাটিতে শিরোনাম ঘোষণা করতে পারবেন, যেখানে কেউ সাধারণত এটি করতে পারে এবং এটি গতিশীল হওয়ারও অনুমতি দেয়।

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);
        }
    };
});

নিজের সাথে ম্যাচ করার জন্য আপনাকে অবশ্যই মডিউলটির নাম পরিবর্তন করতে হবে।

এটি ব্যবহার করতে, কেবল আপনার দৃষ্টিতে এটি ফেলে দিন, আপনি যেমন নিয়মিত <title>ট্যাগ করার জন্য করতেন :

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

গতিশীল দ্বারা যদি আপনার এটির প্রয়োজন না হয় তবে আপনি কেবল সরল পাঠও অন্তর্ভুক্ত করতে পারেন:

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

বিকল্পভাবে, আপনি এটি আরও আই-বান্ধব করে তুলতে একটি অ্যাট্রিবিউট ব্যবহার করতে পারেন:

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

আপনি কৌনিক কোড সহ কোর্সের ট্যাগটিতে যা চান পাঠ্য রাখতে পারেন। এই উদাহরণে এটি $scope.titleTextকাস্টম-শিরোনাম ট্যাগটি বর্তমানে যে কোনও নিয়ামকের মধ্যে রয়েছে তা সন্ধান করবে ।

কেবলমাত্র নিশ্চিত হয়ে নিন যে আপনার পৃষ্ঠায় একাধিক পৃষ্ঠা-শিরোনাম ট্যাগ নেই বা তারা একে অপরকে ক্লোবার করবে।

প্লঙ্কার উদাহরণ এখানে http://plnkr.co/edit/nK63te7BSbCxLeZ2ADHV । শিরোনাম পরিবর্তনটি দেখতে আপনাকে জিপটি ডাউনলোড করতে হবে এবং স্থানীয়ভাবে চালাতে হবে।

— MikeyB
সূত্র
আমি একই রকম কিছু নিয়ে এসেছি। দ্বারা পর্যন্ত সবচেয়ে ব্যবহারের স্বজ্ঞাত, এবং একটি নিয়ামক নির্বাণ প্রয়োজন হয় না html। আমার নির্দেশে আমি একটি alচ্ছিক pageTitlePrefixধ্রুবকও ইনজেক্ট করি ।
— z0r
4

কৌণিক-ইউআই-রাউটারের সরল সমাধান:

এইচটিএমএল:

<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);
   });
}]);
— the_mishra
সূত্র
3

শিরোনাম পরিবর্তনগুলি করার জন্য এখানে একটি আলাদা উপায়। কারখানার ফাংশন হিসাবে স্কেলযোগ্য নাও হতে পারে (যা অনুমিতভাবে সীমাহীন পৃষ্ঠাগুলি পরিচালনা করতে পারে) তবে এটি আমার পক্ষে বুঝতে সহজ হয়েছিল:

আমার সূচক 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" এ ফিরে গিয়ে এনভি-অন্তর্ভুক্ত এবং আমার পার্টিশনের জন্য এনজি-ভিউ ব্যবহার করে nav.html যুক্ত করেছি:

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

এনজি-লম্বা? এই উত্তরের সাথে এর কোনও যোগসূত্র নেই তবে পৃষ্ঠাটি লোড হওয়া অবধি এটি লুকিয়ে রাখে, একটি দুর্দান্ত স্পর্শ :) এখানে কীভাবে শিখুন: Angularjs - এনজি-ক্লোক / এনজি-শো উপাদানগুলি ঝিমুনি

এখানে বেসিক মডিউলটি। আমি এটিকে "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"});
    });

}());

আপনি যদি মডিউলটির প্রান্তের দিকে তাকান, আপনি দেখতে পাবেন যে আমার: আইডির উপর ভিত্তি করে একটি সমালোচক-বিশদ পৃষ্ঠা রয়েছে। এটি আংশিক যা ক্রিস্পি সমালোচক পৃষ্ঠা থেকে ব্যবহৃত হয়। [কর্নি, আমি জানি - সম্ভবত এটি এমন কোনও সাইট যা সমস্ত ধরণের মুরগির নাগেট উদযাপন করে;) যাইহোক, কোনও ব্যবহারকারী কোনও লিঙ্কে ক্লিক করলে আপনি শিরোনাম আপডেট করতে পারেন, সুতরাং আমার প্রধান ক্রিসপি সমালোচক পৃষ্ঠাতে যা সমালোচক-বিশদ পৃষ্ঠাতে বাড়ে, উপরে nav root.title আপডেটটি go

<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 সংস্করণ দেখায়। আপনি দেখতে পাচ্ছেন যে এটি এতটা আলাদা নয়।

চিন্তাভাবনা: আপনি এটি জানেন তবে এটি অন্য কারও জন্য রয়েছে; সূচক html এর নীচে, একটি অবশ্যই মডিউল সহ app.js অন্তর্ভুক্ত করতে হবে:

        <!-- APP -->
        <script type="text/javascript" src="js/app.js"></script>
    </body>
</html>
— noogrub
সূত্র
2
আমার মতামত, এটি ব্যবহার করবেন না। আপনি ভিউতে (উপস্থাপনা) ডেটা (তথ্য) মিশ্রণ করছেন। পরে আপনার HTML লিঙ্কগুলিতে ছড়িয়ে ছিটিয়ে থাকা শিরোনাম উত্সগুলি খুঁজে পাওয়া খুব কঠিন হবে যা দেখার বিভিন্ন জায়গায় উপস্থিত হতে পারে ..
— অমিত বকলে
যেহেতু শিরোনামটি কেবলমাত্র কোনও লিঙ্কে ক্লিক করার পরে আপডেট হয় , ব্যবহারকারী যখন প্রথম কোনও পৃষ্ঠায় অবতরণ করে বা ব্যবহারকারী সতেজ হয় তখন এটি শিরোনামটি সঠিকভাবে সেট করে না।
— মার্ক অ্যামেরি
3

যখন আমাকে এটি সমাধান করতে হবে, আমি ng-appপৃষ্ঠার htmlট্যাগটিতে স্থান রাখতে পারিনি , তাই আমি এটি একটি পরিষেবা দিয়ে সমাধান করেছি:

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;
        }
    };

});
— টম স্যাডারলুন্ড
সূত্র
2

মাইকেল ব্রোমলি থেকে অনুপ্রাণিত কাস্টম ইভেন্ট ভিত্তিক সমাধান

আমি এটি "স্কোপ" দিয়ে কাজ করতে সক্ষম হচ্ছিলাম না, তাই আমি রুটস্কোপ দিয়ে চেষ্টা করেছি, সম্ভবত আরও কিছুটা নোংরা ... (বিশেষত আপনি যদি পৃষ্ঠায় একটি সতেজতা তৈরি করেন যা ইভেন্টটি নিবন্ধভুক্ত না করে)

তবে জিনিসগুলি কীভাবে আলগাভাবে মিলিত হয় তার ধারণাটি আমি সত্যিই পছন্দ করি।

আমি কৌণিক 1.6.9 ব্যবহার করছি

index.run.js

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

function runBlock($rootScope, ...)
{
  $rootScope.$on('title-updated', function(event, newTitle) {
    $rootScope.pageTitle = 'MyApp | ' + newTitle;
  });
}

anyController.controller.js

angular
.module('myApp')
.controller('MainController', MainController);

function MainController($rootScope, ...)
{
  //simple way :
  $rootScope.$emit('title-updated', 'my new title');

  // with data from rest call
  TroncQueteurResource.get({id:tronc_queteur_id}).$promise.then(function(tronc_queteur){
  vm.current.tronc_queteur = tronc_queteur;

  $rootScope.$emit('title-updated', moment().format('YYYY-MM-DD') + ' - Tronc '+vm.current.tronc_queteur.id+' - ' +
                                             vm.current.tronc_queteur.point_quete.name + ' - '+
                                             vm.current.tronc_queteur.queteur.first_name +' '+vm.current.tronc_queteur.queteur.last_name
  );
 });

 ....}

index.html

<!doctype html>
<html ng-app="myApp">
  <head>
    <meta charset="utf-8">
    <title ng-bind="pageTitle">My App</title>

এটি আমার জন্য কাজ করছে :)

— টমাস
সূত্র
1

অন্যের কাছে আরও ভাল পদ্ধতি থাকতে পারে, তবে আমি আমার নিয়ন্ত্রণকারীগুলিতে $ রুটস্কোপটি ব্যবহার করতে সক্ষম হয়েছি, কারণ আমার প্রতিটি মতামত / টেম্পলেটগুলির একটি পৃথক নিয়ামক রয়েছে। প্রতিটি কন্ট্রোলারে আপনাকে $ রুটস্কোপ ইনজেক্ট করতে হবে। যদিও এটি আদর্শ নাও হতে পারে, এটি আমার পক্ষে কাজ করছে, তাই আমি ভেবেছিলাম আমার এটি পাশ করে দেওয়া উচিত। আপনি যদি পৃষ্ঠাটি পরিদর্শন করেন তবে এটি শিরোনাম ট্যাগটিতে এনজি-বাইন্ডিং যুক্ত করে।

উদাহরণস্বরূপ নিয়ন্ত্রক:

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';
}]);

সূচী html শিরোনাম উদাহরণ:

<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>

আপনি পেইন টাইটেল এবং পেজ ডেসক্রিপশনকে গতিশীল মানগুলিতে সেট করতে পারেন, যেমন কোনও আরইএসটি কল থেকে ডেটা ফেরানো:

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

আবার অন্যদের কাছে কীভাবে এটি ব্যবহার করা যায় সে সম্পর্কে আরও ভাল ধারণা থাকতে পারে তবে আমি যেহেতু প্রাক-রেন্ডারিং ব্যবহার করছি তাই আমার চাহিদা পূরণ করা হচ্ছে।

— Kode
সূত্র
0

তার সমাধানের জন্য তোশ শিমায়ামাকে ধন্যবাদ ।
আমি ভেবেছিলাম যে কোনও পরিষেবাটি সরাসরি intoোকানো এত পরিষ্কার নয় $scope, সুতরাং এখানে আমার সামান্যতম পরিবর্তনটি এখানে রয়েছে: http://plnkr.co/edit/QJbuZZnZEDOBcYrJXWWs

কন্ট্রোলার (এটির মূল উত্তরে আমার কাছে কিছুটা বোবা লাগছিল) একটি অ্যাকশনবার অবজেক্ট তৈরি করে এবং এইটি $ সুযোগে ভরাট।
বস্তুটি আসলে পরিষেবাটি অনুসন্ধান করার জন্য দায়ী। এটি টেমপ্লেট ইউআরএল সেট করার কলটিও স্কোপ থেকে আড়াল করে , যা পরিবর্তে ইউআরএল সেট করতে অন্যান্য নিয়ন্ত্রকদের কাছে উপলব্ধ।

— superjos
সূত্র
0

মিঃ হ্যাশের এখনও অবধি সেরা উত্তর ছিল, তবে নীচের সমাধানগুলি নীচের সুবিধাগুলি যুক্ত করে এটিকে (আমার জন্য) আদর্শ করে তুলেছে:

  • কোনও ঘড়ি যুক্ত করে না, যা জিনিসগুলিকে ধীর করতে পারে
  • আসলে আমি নিয়ামকটিতে যা করতে পেরেছিলাম তা স্বয়ংক্রিয়ভাবে সক্রিয় করে
  • আমি এখনও চাইলে নিয়ামকের কাছ থেকে আমাকে অ্যাক্সেস দেয়।
  • কোনও অতিরিক্ত ইনজেকশন নেই

রাউটারে:

  .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
])
— কিম মিলার
সূত্র
-4

আমি যে আরও ভাল এবং গতিশীল সমাধানটি পেয়েছি তা হ'ল ভেরিয়েবল পরিবর্তনগুলি সনাক্ত করতে ঘড়ি ব্যবহার করা এবং তারপরে শিরোনাম আপডেট করা।

— geolyth
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.