Question

如何为MEAN js应用程序的每个页面添加动态标题。在layout.server.js中定义了标题如下。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>{{title}}</title>

那么我们如何制作动态标题？

Answer 1

有些人可能会误导，除了它已经是动态的，它可以被改变，并且它由开箱即用的角度控制，因为有{{ }}的表达式，但这不是真的。

实际上{{title}}可能意味着应该针对scope.title进行评估的表达式，但是如果你深入了解MEAN.js，你会看到它正在使用swig模板引擎，它也使用了{{ }}来定义变量。 在这种情况下，{{title}}不是一个角度表达式，它是一个swig变量，它是通过express / swig传递的，可以在config/env/default.js中更改（在MEAN中）。 js 0.4.0）。

如果要在前端更改标题（即可以在角度逻辑中更改标题），则必须将范围变量分配给title元素或使用自定义指令。即使最初标题值是使用express / swig定义的标题值，角度也可以在之后进行控制并根据您的需要进行更改。

一种解决方案可能是在角状态中定义标题，如下所示：

.state('some-state', {
    url: '/someurl',
    templateUrl: 'some-path-to-view',
    data: {
        title: 'My new title',
    }
  })

然后听取$stateChangeSuccess事件来设置标题：

$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
    console.log(toState.data.title); // Prints the new title to the console
    // Set the title    
});

编辑：重写第一段以增加连贯性。

Answer 2

要添加到已接受的问题，请在MeanJS堆栈中执行以下操作：

在modules/core/client/views ex中创建一个新视图。 title.client.view.html。

在文件title.client.view.html中，您可以通过以下方式获取标题：

<div ng-controller="HeaderController">
   <span>{{$state.current.data.pageTitle}}</span>
</div>

HeaderController有一个$state变量，其中包含在：

中指定的当前状态标题

.state('some-state', {
url: '/someurl',
templateUrl: 'some-path-to-view',
data: {
    title: 'My new title',
}})

然后在modules/core/server/views/layout.server.view.html文件中获取您包含title.client.view.html的标题：

<div ng-include="'/modules/core/client/views/title.client.view.html'"></div>

这将在您导航时动态呈现状态标题。

Answer 3

MEAN.JS页面标题已经是动态的，可以在modules / core / client / directives / page-title.client.directive.js中找到：

function listener(event, toState) {
        var applicationCoreTitle = 'MEAN.js',
          separator = ' - ',
          stateTitle = applicationCoreTitle + separator;

“ MEAN.js”是默认页面标题，可以相应地进行更改。

MEAN js动态冠军

3 个答案: