किसी दस्तावेज़ के <head> अनुभाग में एक कोणीय निर्देश कैसे बनाएं?

मैं angular.js पर नया हूं। मैं HTML दस्तावेज़ों के <head> अनुभाग में कुछ शीर्षक और मेटा टैग जोड़ने का निर्देश बनाने का प्रयास कर रहा हूं, लेकिन मुझे कुछ परेशानी हो रही है।किसी दस्तावेज़ के <head> अनुभाग में एक कोणीय निर्देश कैसे बनाएं?

<!DOCTYPE html> 
<html ng-app="myApp"> 
<head> 
    <meta charset="UTF-8"> 
    <base href="/"> 
    <seo-title></seo-title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script> 
    <script src="https://code.angularjs.org/1.4.1/angular-route.min.js"></script> 
    <script src="/incl/js/myApp.js"></script> 
</head> 
<body > 
    <div ng-view></div> 
</body> 
</html>

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

var app = angular.module ('myApp', ['ngRoute']); 

app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) { 

    $routeProvider 
     .when('/', { templateUrl: 'routes/home.html'}) 
     .when('/pageA', { templateUrl: 'routes/pageA.html'}) 
     .when('/pageB', { templateUrl: 'routes/pageB.html'}) 
     .otherwise({ redirectTo: '/' }); 

    $locationProvider.html5Mode({ 
     enabled: true 
    }); 

}]); 

app.directive('seoTitle', function() { 
    return { 
     restrict: 'E', 
     template: '<title>{{seo.title}}</title>' 
    }; 
});

जब मैं निरीक्षक खोलते हैं, तो निर्देश <body> ले जाया गया है और साथ प्रतिस्थापित नहीं किया गया है

मेरे index.html दस्तावेज़ निम्नलिखित के रूप में है टेम्पलेट:

enter image description here

मैं हेडर में निर्देश कैसे बना सकता हूं?

पीएस .: एक कोड उदाहरण बहुत अच्छा होगा!

स्रोत

2015-07-07 JVerstry

मेटा टैग जोड़ने के लिए आपको निर्देश क्यों चाहिए? बस उन्हें शुरुआत से बाहर रखो? और शीर्षक को आसानी से नियंत्रक से सेट किया जा सकता है जिसे HTML टैग को असाइन किया जा सकता है और उसके सिर तक पहुंच होगी। – Chrillewoodz

कुछ पेज में कुछ मेटा टैग होंगे और अन्य नहीं होंगे। इसके अलावा, यह केवल शीर्षक के बारे में नहीं है, यह किसी पृष्ठ को नोंडेक्स को रोबोट मेटा टैग सेट करने के बारे में हो सकता है ... – JVerstry

मुझे यकीन नहीं है, लेकिन मुझे लगता है कि HTML spec कस्टम तत्वों की अनुमति नहीं देता है, जैसे ' '' के बच्चे के रूप में। भले ही, टेम्पलेट निर्देश तत्व को प्रतिस्थापित नहीं करता है - आप 'प्रतिस्थापन: सत्य' का उपयोग कर सकते हैं (लेकिन इसे बहिष्कृत किया जा रहा है), या आप इसके बजाय एक विशेषता निर्देश का उपयोग कर सकते हैं ' ' –

आप इस सवाल का जवाब यहाँ है: Set Page title using UI-Router, अपने कोड में लागू हो सकता है:

<!DOCTYPE html> 
<html ng-app="myApp"> 
<head> 
    <meta charset="UTF-8"> 
    <base href="/"> 
    <title seo-title>doesn't work</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script> 
    <script src="https://code.angularjs.org/1.4.1/angular-route.min.js"></script> 
    <script src="/incl/js/myApp.js"></script> 
</head> 
<body > 
    <div ng-view></div> 
</body> 
</html>

और आप js:

app.directive('seoTitle', function() { 
return { 
    restrict: 'a', 
    template: 'works' 
};

तुम सिर्फ एक नियंत्रक या स्थापित करने के लिए कुछ तर्क जोड़ने की जरूरत शीर्षक जो आप चाहते हैं

स्रोत

2015-07-07 20:56:00

पहली चीजें पहले: मैं इंस्पेक्टर में देख रहा था और हाँ, किसी भी तरह शीर्षक टैग शरीर के भीतर दिखाई देता है। लेकिन ऐसा लगता है कि इसके कार्य को प्रभावित नहीं करना है।

अब समाधान के लिए: पहली नज़र में ऐसा लगता है कि केवल replace: trueseoTitle निर्देश की घोषणा में अनुपलब्ध है। यह जोड़ा जा रहा है समस्या का हल और seo-title योजना के अनुसार title टैग के साथ बदल दिया जाता है, लेकिन कोणीय एक अतिरिक्त span तत्व में सामग्री लपेटता रूप में एक नया गुंजाइश बनाई गई है (भले ही seoTag के लिए गुंजाइश पृथक घोषित किया जाता है scope: {})।

मैं निम्नलिखित समाधान के साथ आया था:

app.directive('seoTitle', function() { 

    function compile(elem, attrs, transclude) { 

     return function ($scope) { 
      transclude($scope, function (clone) { 
       elem.empty(); 
       elem.append(clone[0].innerText); 
      }); 
     }; 
    } 

    return { 
     restrict: 'E', 
     replace: true, 
     transclude: true, 
     scope: {}, 
     compile: compile, 
     template: '<title ng-transclude></title>', 
    }; 

});

उपयोग:

<seo-title>My Title</seo-title>

जैसा कि पहले ही उल्लेख किया है, replace: true के साथ लपेटकर seo-title टैग हटा सकते हैं।

अतिरिक्त बनाई span तत्व को निकालने के लिए, मैं रिटर्न के साथ compile समारोह postLink समारोह प्रदान करते हैं।

मैं वास्तव में समझा नहीं सकता, मुझे फ़ंक्शन के भीतर transclude फ़ंक्शन का उपयोग करने की आवश्यकता क्यों है। यह एक आम समस्या है, कि इस मामले में कोणीय एक अतिरिक्त span तत्व बनाता है। थोड़ा सा प्रयास और त्रुटि के साथ मैंने पाया कि span से छुटकारा पाने का सबसे आसान तरीका तत्व है emtpy() तत्व और केवल innerText संलग्न करें।

स्रोत

2015-07-07 21:41:59 mrak

कोई विचार नहीं है कि यह अतिरिक्त अवधि कहां से आती है, पहले कभी नहीं देखी गई। प्रदान की गई समाधान की तुलना में कहीं अधिक जटिल लगता है – charlietfl

शीर्षक को सेट करने के लिए आपके निर्देश को head में जाने की आवश्यकता नहीं है। बस अपना निर्देश $window इंजेक्ट करें और $window.document.title = 'your title' सेट करें।

अद्यतन इस प्रकार आप मेटा टैग अपडेट कर सकते हैं।

मेटा टैग को अद्यतन करने के लिए मैं इस तरह एक निर्देशक का प्रयोग करेंगे: एक सेवा के साथ-साथ

mmMetaTags.$inject = ['metaTags']; 
function mmMetaTags(metaTags) { 

    return { 
     restrict: 'A', 
     link: function(scope, element) { 

      metaTags.metaTags.forEach(function(tag) { 
       addMetaTag(tag.name, tag.content) 
      }); 

      metaTags.subscribe(addMetaTag); 

      function addMetaTag(name, content) { 

       var tag = element[0].querySelector('meta[name="' + name + '"]'); 

       if (tag) { 

        tag.setAttribute('content', content); 
       } else { 

        element.append('<meta name="' + name + '" content="' + content + '">'); 
       } 
      } 
     } 
    } 

} 

directive('mmMetaTags', mmMetaTags);

मेटाटैग स्थापित करने के लिए: अपने head टैग में

function MetaTags() { 

    // private 
    this._tags = []; 

    // private 
    this._subscriber; 

    var self = this; 
    Object.defineProperty(this, 'metaTags', { get: function() { 
     return self._tags; 
    }}); 
} 

MetaTags.prototype.addMetaTag = function(name, content) { 
    this._tags.push({ name: name, content: content }); 
    this._updateSubscriber(name, content); 
} 

MetaTags.prototype.subscribe = function(callback) { 
    if (!this.subscriber) { 
     this._subscriber = callback; 
    } else { 
     throw new Error('Subscriber already attached. Only one subscriber may be added as there can only be one instance of <head>'); 
    } 
} 

// private 
MetaTags.prototype._updateSubscriber = function(name, content) { 
    this.subscriber(name, content);  
} 

service('metaTags', MetaTags);

तो तुम विशेषता को शामिल किया जाएगा mm-meta-tags । फिर अपने नियंत्रक में आप metaTags सेवा इंजेक्ट करेंगे और टैग अपडेट करने के लिए addMetaTag पर कॉल करेंगे।

स्रोत

2015-07-07 21:52:26 Martin

मुझे शीर्षक के लिए सरल समाधान के बारे में पता है, लेकिन जैसा कि प्रश्न टिप्पणियों में उल्लिखित है, यह केवल शीर्षक के बारे में नहीं है .. – JVerstry

@JVerstry मैंने निर्देश के उदाहरण के साथ अपना उत्तर अपडेट किया है और मेटा टैग सेट करने के लिए सेवा। – Martin

आप metang लाइब्रेरी का प्रयास कर सकते हैं। शीर्षक के अलावा यह अन्य मेटा टैग का समर्थन करता है (विवरण, लेखक, ओजी: , ट्विटर:, आदि)

स्रोत

2016-06-21 06:51:43 timsly

अरे, कृपया किसी भी नमूना – Ashu

द्वारा मेटांग के साथ मेरी मदद कर सकते हैं हां, सुनिश्चित करें। यहां उदाहरण है https://gist.github.com/timsly/85aadbfb559d85c03a0995f58b28ba56 – timsly

यदि आवश्यक हो तो मैं बाद में jsfiddle या codepen जोड़ सकता हूं – timsly

किसी दस्तावेज़ के <head> अनुभाग में एक कोणीय निर्देश कैसे बनाएं?

उत्तर

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