Question

我正在使用angularjs'ui.router并有两个模板视图用于路由。因此，我只有一个关于index.html

的<head></head>信息

但是，我想将不同的系列标题元属性和值信息应用于这两个模板。例如，t <meta property="og:title" content="Something1">到模板1，<meta property="og:title" content="Something2">到模板2。

我有什么方法可以做但仍然使用ui.router而不是将它们分成两个独立的页面？

Answer 1

使用$rootScope变量。

<强> main.js：

$rootScope.metatags = {
    content: 'Default content'
};

Something1 Controller：

$rootScope.metatags.content = 'Something1';

Something2 Controller：

$rootScope.metatags.content = 'Something2';

<强>的index.html：

<head>
    // something
    <meta property="og:title" content="{{metatags.content}}">
</head>

Answer 2

与@WorkWe使用$rootScope相同但不是将元标记信息放在控制器上，您可以将其作为data object的值传递，该值是定义新的时的可选属性州。有关详细信息，请参阅docs。

$stateProvider
    .state('home', {
        url: '/',
        templateUrl: 'home.html',
        data: {
            metatags: { title: 'Something1' }
        }
    })
    .state('about', {
        url: '/about',
        templateUrl: 'about.html',
        data: {
            metatags: { title: 'Something2' }
        }
    });

在app.js中，将其分配给某个$ rootScope属性

angular
    .module('app', ['ui.router'])
    .run(function($rootScope, $state) {
        $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
            if(angular.isDefined(toState.data) && angular.isDefined(toState.data.metatags)) {
                $rootScope.metatags = toState.data.metatags;
            } else {
                $rootScope.metatags = { title: 'Your default meta title content' };
            }
        });
    });

最后，在你的html文件中：

<head>
    <meta name="og:title" content="{{ metatags.title }}">
</head>

使用ui.router时如何使用两个标题信息？

2 个答案: