头部中的角度动态元标记答案

【问题标题】：Angular Dynamic meta tags in head头部中的角度动态元标记
【发布时间】：2015-02-07 12:29:50
【问题描述】：

我需要在 Angular 应用程序的特定页面上插入打开的图形元标记。

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

我尝试向 $rootscope 添加一个变量。此变量将在相关时使用元标记填充。

现在这是我的问题。一旦这个变量被 HTML 字符串填充，它们就不会形成头部的一部分，而是输出到正文。我已经搜索了一天，找不到任何可行的解决方案。任何帮助将不胜感激

【问题讨论】：

你的 ng-app 是放在 header 层还是 body 层？
你能贴一些代码吗？

标签： angularjs facebook-opengraph meta-tags

【解决方案1】：

我创建了一个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: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-router 的支持正在开发中。

【讨论】：

我认为setDescription(String value) 在当前版本中不可用，但setTag(String tagName, String value) 可以完成这项工作。

【解决方案2】：

我在使用 Apple 的 Smart App Banner 时遇到了类似的问题。如果您仍在寻找答案，您也许可以应用类似的逻辑。

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

我设置了一个服务，它使用this answer. 的 id 填充 urlArgument，并在页面控制器中使用它。

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

【讨论】：

【解决方案3】：

我想重新回答这个问题。事实上，你需要一个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 中创建一个空的元元素并在其上添加属性。然后用新元元素的 outerHTML 替换指令元素的 outerHTML。你可以查看这个页面：Simple Dynamic Meta Tags in AngularJS

【讨论】：

【解决方案4】：

如果你使用ui-router，你可以使用$stateChangeSuccess根据当前状态动态设置元描述和其他元标记。您必须将自定义元描述放在$stateProvider.state(...) 中定义的每个状态中。

HTML 标记中必须有<meta name="description" content="Default Description">，然后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;
        }
    }
});

【讨论】：