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

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

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

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

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

источник

2014-12-09 Clyde Lobo

Вы разместили свое ng-приложение на уровне заголовка или уровне тела? –

Можете ли вы опубликовать код? –

Я создал Angular module, который может быть использован для создания мета-теги динамически с помощью определения маршрута $ 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-router в работе.

источник

2015-08-22 05:33:35 WeNeigh

Я думаю, что 'setDescription (String value)' недоступно в текущей версии, но 'setTag (String tagName, String value)' выполняет задание. – gugol

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

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

Я создал службу, заполняющий urlArgument с идентификатором, как в this answer., и использовать его в контроллере страницы.

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

источник

2015-01-07 22:00:33 lrlna

Я хочу ответить на этот вопрос. Infact, все, что вам нужно directive. Вы должны установить все мета-ценности, как объекта, такие как: {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 и добавить в него атрибуты. Затем замените внешнийHTML внешнего элемента управления на внешнийHTML нового мета элемента. Вы можете проверить эту страницу: Simple Dynamic Meta Tags in AngularJS

источник

2016-03-29 12:46:04

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

ответ

Смежные вопросы