angularjs - 如何在 AngularJs 中使用 UI-Route 在每个页面中设置动态元数据

Question

我正在开发一个在 AngularJs 中构建的应用程序，但我在动态设置元标题、名称、描述方面遇到了一些问题。我试过“ui.router.metatags”，但问题是当我在任何浏览器中查看源代码时，元标题、名称、描述都没有显示。它只显示为 {{meta.title}} 而不是注入的实际数据。

这是我的代码：

$stateProvider
.state('home', {
    url: "/",
    metaTags: {
        title: 'title1',
        description: 'description',
        keywords: 'keyword1,keyword2,...',
        properties: {
            'og:title': 'title1'
        }
    },
    views : {
        "" : {
            templateUrl:"/home/home.html",
            controller: 'homeCtrl',
            controllerAs:'vm',
        }
    },

    resolve: {
        loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
            return $ocLazyLoad.load('home'); // Resolve promise and load before view
        }]
    }
})

这是索引文件代码：

<title ng-bind="MetaTags.title">{{MetaTags.title}}</title>
<meta name="description" content="{{MetaTags.description}}">
<meta name="keywords" content="{{MetaTags.keywords}}">

标签： angularjsangular-ui-routermetadata