Угловые динамические метатеги в голове

Мне нужно вставить мета-теги открытого графика на определенную страницу в угловом приложении.

Эти теги различаются в зависимости от новостей или видео на странице.

Я попытался добавить переменную в $rootcope. Эта переменная будет заполнена метатегами, когда это уместно.

Теперь вот моя проблема. Как только эта переменная заполняется строкой HTML, они не образуют часть заголовка и вместо этого выводятся в тело. Я искал в течение дня и не мог найти какие-либо жизнеспособные решения. Любая помощь будет оценена

Источник

4 ответа

Решение

Я создал модуль Angular, который можно использовать для динамической установки метатегов с помощью $routeProvider определения маршрута.

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

Затем вы можете установить метатеги в HTML так

<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}}" />

Чтобы установить заголовок, описание и og: изображение динамически, вы можете ввести ngMeta в ваш контроллер

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

Поддержка дополнительных тегов и UI-роутер находятся в разработке.

Источник

У меня была похожая проблема с Apple Smart App Banner. Возможно, вы сможете применить аналогичную логику, если вы все еще ищете ответ.

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

Я настроил сервис, который заполняет urlArgument с идентификатором согласно этому ответу. и использовал его в контроллере страниц.

module.controller('myNewsVideoCtrl', function($scope, $stateParams, $rootScope, openGraph ){
  $rootScope.opengraph = openGraph;
  $rootScope.opengraph.set("http://www.imdb.com/title/"+$stateParams.videoID);
})
Источник

Я хочу еще раз ответить на этот вопрос. Infact, все ваши нужны директивы. Вы должны установить все свои мета значения как объект, такой как: {name:'keywords',content:'angularjs, directive,meta'}

Если вы хотите добавить его в $rootScope, это может быть так:

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

Затем вы можете использовать ключи объекта в качестве атрибута и их значение. Повторите директиву и передайте все ваши метас в нем. Если вам не нужен чистый HTML, вы можете создать пустой метаэлемент в javascript и добавить к нему атрибуты. Затем замените externalHTML элемента директивы вашим externalHTML нового метаэлемента. Вы можете проверить эту страницу: Простые динамические метатеги в AngularJS

Источник

Если вы используете UI-роутер, вы можете использовать $stateChangeSuccess динамически устанавливать мета-описание и другие метатеги в зависимости от текущего состояния. Вы должны поместить пользовательское мета-описание в каждое состояние, определенное в $stateProvider.state(...),

Вы должны иметь <meta name="description" content="Default Description"> в разметке HTML, то и тогда document.getElementsByTagName('meta') сможет вернуть мета-тег описания.

$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;
        }
    }
});
Источник
Другие вопросы по тегам