头部中的Angular Dynamic meta标签

Question

我需要在有角度的应用程序的特定页面上插入开放图元标记。

这些标签根据页面上的新闻或视频而有所不同。

我尝试将变量添加到$ rootscope。相关变量将使用meta标记填充。

现在这是我的问题。只要用HTML字符串填充此变量，它们就不会形成头部的一部分，而是输出到主体。我搜寻了一天，找不到任何可行的解决方案。任何帮助，将不胜感激

Answer 1

我创建了一个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：image，可以注入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路由器的工作正在进行中。