Winkel-Dynamische meta-tags in den Kopf

Ich das einfügen muss open graph meta tags auf einer bestimmten Seite in einer angular-app.

Diese tags sind unterschiedlich, basierend auf den Nachrichten oder Videos, die die Seite hat.

Ich habe versucht, das hinzufügen einer Variablen auf den $rootscope. Diese variable wird gefüllt mit dem meta-tags, wenn es relevant ist.

Hier ist nun mein Problem. Sobald diese variable wird gefüllt mit dem HTML-string, den Sie nicht bilden einen Teil des Kopfes und sind stattdessen ausgegeben, um den Körper. Ich habe gesucht, für einen Tag und konnte nicht keine praktikable Lösungen zu finden. Jede Hilfe würde geschätzt

Haben Sie Ihre ng-app auf Kopf-Ebene oder Körper-Ebene?
kannst du etwas code?

InformationsquelleAutor Clyde Lobo | 2014-12-09

  1. 11

    Erstellte ich eine Winkel-Modul, die verwendet werden können, um meta-tags, die dynamisch mit der $routeProvider route Definitionen.

    angular.module('YourApp','ngMeta')
.config(function ($routeProvider, ngMetaProvider) {

  $routeProvider
  .when('/home', {
    templateUrl: 'home-template.html',
    meta: {
      //Sets 'Home Page' as the title when /home is open
      title: 'Home page', 
      description: 'This is the description of the home page!'
    }
  })
  .when('/login', {
    templateUrl: 'login-template.html',
    meta: {
      //Sets 'Login Page' as the title when /login is open
      title: 'Login page',
      description: 'Login to this wonderful website!'
    }
  })
});

    Anschließend können Sie die meta-tags in HTML wie so

    <title ng-bind="ngMeta.title"></title>
<!-- OR <title>{{ngMeta.title}}</title> -->    

<!-- This meta tag can be set using ngMetaProvider -->
<meta property="og:type" content="{{ngMeta.ogType}}" />

<!-- Default locale is en_US -->
<meta property="og:locale" content="{{ngMeta.ogLocale}}" />

<!-- This meta tag changes based on the meta object of each route -->
<!-- or when the setDescription function is called -->
<meta name="description" content="{{ngMeta.description}}" />

    Um Titel, description und og:image dynamisch, Sie kann Spritzen ngMeta in den controller

    .controller('DemoCtrl', function(ngMeta) {

    ngMeta.setTitle('Demo page');
    ngMeta.setDescription('This is the description of the demo page');
    ngMeta.setOgImgUrl('http://example.com/abc.jpg');
});

    Unterstützung für tags und ui-router sind in Arbeit.

    Ich denke setDescription(String value) ist nicht verfügbar in der aktuellen version, aber setTag(String tagName, String value) macht den job.
    Wird diese Arbeit mit stateProvider?

    InformationsquelleAutor WeNeigh

  2. 1

    Ich hatte ein ähnliches problem mit Apple ' s Smart App Banner. Sie können in der Lage sein, die ähnliche Logik, wenn Sie noch auf der Suche nach einer Antwort. 

    <html ng-app="myNewsApp">`
<head>
  <title> myNews </title>
  <meta property="og:url" content={{opengraph.urlArgument()}}/>
</head>

    Ich einen Dienst, füllt die urlArgument mit der id pro diese Antwort., und verwendet es in der page-controller. 

    module.controller('myNewsVideoCtrl', function($scope, $stateParams, $rootScope, openGraph ){
  $rootScope.opengraph = openGraph;
  $rootScope.opengraph.set("http://www.imdb.com/title/"+$stateParams.videoID);
})

    InformationsquelleAutor lrlna

  3. 1

    Ich möchte wieder diese Frage beantworten. Infact, alle brauchen eine Richtlinie. Sie sollten alle Ihre meta-Werte, wie ein Objekt, wie zum Beispiel : {name:'keywords',content:'angularjs, directive,meta'}

    Wenn Sie möchten, fügen Sie es auf den $rootScope es kann wie diese :

    $rootScope.metas = [{
  name:'description',
  content :'AngularJS meta example'
},{
  name:'keywords',
  content :'AngularJS, metas, example'
},{
  charset:'UTF-8'
}];

    Dann können Sie mit dem Objekt-Schlüssel als Attribut und Ihrem Wert. Wiederholen Sie die Richtlinie, und übergeben Sie alle Ihre metas im. Wenn Sie nicht wollen, eine klare html-Sie erstellen ein leeres meta-Elements in javascript und Attribute hinzufügen. Dann ersetzen Sie die Richtlinie Elements outerHTML-mit Ihrem neuen meta-element ist outerHTML. Sie können dies überprüfen, Seite : Einfache Dynamische Meta-Tags in AngularJS

    InformationsquelleAutor Kamuran Sönecek

  4. 0

    Wenn Sie ui-router, die Sie verwenden können $stateChangeSuccess auf dynamisch gesetzt meta-Beschreibung und andere meta-tags basierend auf einem aktuellen Stand. Sie haben, um benutzerdefinierte meta-Beschreibung in jedem Zustand definiert, in $stateProvider.state(...).

    Müssen Sie <meta name="description" content="Default Description"> im HTML-markup, dann und dann document.getElementsByTagName('meta') wird in der Lage sein, um die Rückkehr der meta-description-tag.

    $stateProvider
    .state('app.about', {
        url: 'about',
        templateUrl: '/modules/core/client/views/about.client.view.html',
        controller: 'AboutController',
        controllerAs: 'vm',
        metaDesc: 'Learn about my awesome social site.',
        data: {
            pageTitle: 'About | The Social Site'
        }
    })

$rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {

    var metaDesc = $state.current.metaDesc || "Default Meta Description";

    var metas = document.getElementsByTagName('meta');

    for (let i = 0; i < metas.length; i++) {
        if (metas[i].getAttribute("name") === "description") {
            metas[i].setAttribute("content", metaDesc);
            break;
        }
    }
});

    InformationsquelleAutor Xyroid

Schreibe einen Kommentar