我需要在角度应用程序中的特定页面上插入开放图形元标记.
我尝试在$rootscope中添加一个变量.当变量相关时,将使用元标记填充此变量.
现在这是我的问题.只要此变量填充了HTML字符串,它们就不会形成头部的一部分而是输出到正文.我搜索了一天,找不到任何可行的解决方案.任何帮助,将不胜感激
解决方法
我创建了一个
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');
});
