Question

我已经配置了这样的路线：

$routeProvider
.when('/items/:category/', {
  templateUrl: 'items.html',
  controller: 'ItemsController',
  reloadOnSearch: false
})
.when('/items/item/:itemId/', {
  templateUrl: 'item.html',
  controller: 'ItemDetailController',
  reloadOnSearch: false
})
.otherwise({

});

首先是显示所有项目，第二个是一个特定项目的详细视图。

我的这些元数据仅用于详细视图：

<meta property="og:type" content="product.item">
<meta property="og:product:retailer_item_id" content="[[ selectedItem.id ]]">
<meta property="og:product:condition" content="new">
<meta property="og:title" content="Товары магазина [[ selectedItem.shop.username ]]">
<meta property="og:image" content="[[selectedItem.img]]">

由于角度视图中的所有视图共享一个<head>标记，因此我想在用户选择项目时动态包含这些元标记。

我以为我会做这样的事情：

<div ng-if="detailView" ng-controller="ItemDetailController">
    <meta property="og:type" content="product.item">
    // and the rest
</div>

事实证明<div>内不允许<head>。

我该怎么办？

Answer 1

您可以创建一个简单的工厂

angular.module('...').factory('SEO', function () {
  return {
    title: 'this is an amazing title',
    image: 'blablabla.png',
    ...
  };
});

然后您在.run()方法中调用它，然后将其放入$ rootScope中，例如$rootScope.seo = SEO;然后在<head>标记中您可以编写$root.seo.title，您只需在控制器中更改SEO.title和SEO.image即可更新<head>代码

我希望它能解决你的问题，

如果没有，请不要犹豫与我联系:)。

动态地包括angularjs中的元数据

1 个答案: