我需要在有角度的应用程序的特定页面上插入开放图元标记。
这些标签根据页面上的新闻或视频而有所不同。
我尝试将变量添加到$ rootscope。相关变量将使用meta标记填充。
现在这是我的问题。只要用HTML字符串填充此变量,它们就不会形成头部的一部分,而是输出到主体。我搜寻了一天,找不到任何可行的解决方案。任何帮助,将不胜感激
我创建了一个Angular模块,该模块可用于使用$routeProvider路由定义动态设置元标记。
$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到控制器中
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路由器的工作正在进行中。