Fatal编程技术网
  • angularjs/
  • Angularjs 头部角度动态元标记

Angularjs 头部角度动态元标记

angularjs

Angularjs 头部角度动态元标记,angularjs,facebook-opengraph,meta-tags,Angularjs,Facebook Opengraph,Meta Tags,我需要在angular应用程序的特定页面上插入open graph meta标记 这些标签根据页面上的新闻或视频而有所不同 我尝试向$rootscope添加一个变量。此变量将在相关时填充元标记 现在是我的问题。一旦这个变量被HTML字符串填充，它们就不会构成头部的一部分，而是被输出到身体。我找了一天，找不到任何可行的解决办法。任何帮助都将不胜感激我对苹果的智能应用横幅也有类似的问题。如果您仍在寻找答案，则可以应用类似的逻辑 <html ng-app="myNewsApp">` <

我需要在angular应用程序的特定页面上插入open graph meta标记

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

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

现在是我的问题。一旦这个变量被HTML字符串填充，它们就不会构成头部的一部分，而是被输出到身体。我找了一天，找不到任何可行的解决办法。任何帮助都将不胜感激

我对苹果的智能应用横幅也有类似的问题。如果您仍在寻找答案，则可以应用类似的逻辑

<html ng-app="myNewsApp">`
<head>
  <title> myNews </title>
  <meta property="og:url" content={{opengraph.urlArgument()}}/>
</head>
我创建了一个可用于使用
$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中设置meta标记

<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}}" />
对更多标签和ui路由器的支持正在进行中。

我想重新回答这个问题。事实上，你所需要的只是一个。您应该将所有元值设置为对象，例如：
{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。您可以查看此页面：

如果您正在使用，您可以使用
$stateChangeSuccess
根据当前状态动态设置元描述和其他元标记。您必须在
$stateProvider.state（…）
中定义的每个状态中放置自定义元描述

您必须在HTML标记中有
，然后是
文档。getElementsByTagName（'meta'）
将能够返回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;
        }
    }
});

$stateProvider
.state（'app.about'{
url:'关于'，
templateUrl:“/modules/core/client/views/about.client.view.html”，
控制器：“AboutController”，
controllerAs:'vm'，
metaDesc:“了解我很棒的社交网站。”，
数据：{
页面标题：“关于社交网站”
}
})
$rootScope.$on（“$stateChangeSuccess”，函数（事件、toState、toParams、fromState、fromParams）{
var metaDesc=$state.current.metaDesc | |“默认元描述”；
var metas=document.getElementsByTagName（'meta'）；
for（设i=0；i
您是否将您的ng应用程序放在标题级或正文级？您可以发布一些代码吗？我认为当前版本中不提供
setDescription（String value）
，但是
setTag（String tagName，String value）
可以完成这项工作。 
$rootScope.metas = [{
  name:'description',
  content :'AngularJS meta example'
},{
  name:'keywords',
  content :'AngularJS, metas, example'
},{
  charset:'UTF-8'
}];

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