Angularjs 使用ui.router时如何使用两个标头信息？_Angularjs

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

angularjs

Angularjs 使用ui.router时如何使用两个标头信息？,angularjs,Angularjs,我使用angularjs的ui.router，有两个路由模板视图。因此，我在index.html上只有一个信息但是，我想将不同的序列头元属性和值信息应用于这两个模板。例如，t到模板1和到模板2 有什么方法可以做到这一点，但仍然使用ui.router，而不是将它们分为两个独立的页面吗？使用$rootScope变量 main.js: $rootScope.metatags = { content: 'Default content' }; $rootScope.metatags.cont

我使用angularjs的ui.router，有两个路由模板视图。因此，我在index.html上只有一个

信息

但是，我想将不同的序列头元属性和值信息应用于这两个模板。例如，t

到模板1和

到模板2

有什么方法可以做到这一点，但仍然使用ui.router，而不是将它们分为两个独立的页面吗？

使用

$rootScope

变量

main.js:

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

$rootScope.metatags.content = 'Something1';

$rootScope.metatags.content = 'Something2';

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

Something1控制器：

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

$rootScope.metatags.content = 'Something1';

$rootScope.metatags.content = 'Something2';

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

Something2控制器：

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

$rootScope.metatags.content = 'Something1';

$rootScope.metatags.content = 'Something2';

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

index.html:

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

$rootScope.metatags.content = 'Something1';

$rootScope.metatags.content = 'Something2';

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


//某物

与@WorkWe使用

$rootScope

的想法相同，但您可以将其作为定义新状态时可选属性的

数据对象的值传递，而不是将元标记信息放在控制器上。有关更多信息，请参阅
$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>

也许这有帮助：我在facebook网站管理员的“property=”og:title“'上尝试了它，但它无法解析{{metatags.content}（）。另外，如果我使用$rootScope，我所有页面的作用域都会中断，所有的“{}}”表达式都无法解析。