在头部角动态meta标签 [英] Angular Dynamic meta tags in head

问题描述

我需要在一个角应用特定页面中插入图形开放meta标签。

I need to insert open graph meta tags on a particular page in an angular app.

这些标记根据的消息或视频的页面有不同。

These tags are different based upon the news or video that the page has.

我尝试添加一个变量到$ rootscope。这个变量将与meta标签填充时，它是相关的。

I tried adding a variable to the $rootscope. This variable will be populated with the meta tags when it is relevant.

现在，这里是我的问题。一旦这个变量被HTML字符串填充，它们不用于头部的一部分，并代替输出到身体。我已经寻找了一天，但没有找到任何可行的解决方案。任何帮助将是AP preciated

Now here is my issue. As soon as this variable gets populated with the html string, they don't for a part of the head and are instead outputted to the body. I have searched for a day and could not find any viable solutions. Any help would be appreciated

推荐答案

我创建了一个角模块可以用来设置meta标签动态使用$ routeProvider路线定义。

I created an Angular module that can be used to set meta tags dynamically using the $routeProvider route definitions.

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

然后，您可以设置meta标签在HTML中像这样

You can then set the meta tags in HTML like 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}}" />

要设置标题，描述和OG：图像动态，你可以注入 ngMeta 到控制器

To set the title, description and og:image dynamically, you can inject ngMeta into your 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');
});

有关更多的标签和UI路由器支持是在作品中。

Support for more tags and ui-router are in the works.

这篇关于在头部角动态meta标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！