Question

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

根据网页上的新闻或视频，这些代码会有所不同。

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

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

Answer 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：图像，您可以将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正在开发中。

Answer 2

我在Apple的智能应用横幅上遇到了类似的问题。如果您仍在寻找答案，您可以应用类似的逻辑。

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

Answer 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中创建一个空元元素并在其上添加属性。然后用新的meta元素的outerHTML替换指令元素的outerHTML。您可以查看此页面：Simple Dynamic Meta Tags in AngularJS

Answer 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;
        }
    }
});

头部的角度动态元标记

4 个答案: