Question

我有一个经典的AngularJS应用程序，它具有到多个视图的路由，每个视图都有自己的控制器。我有一些页面与其他页面非常不同，所以页面之间的共享HTML数量很少：

<html>
 <head>    
  <!-- typical header links -->
 </head>
 <body ng-app="NeXT">

 <div class="div_view" ng-view></div>

 </body>
</html>

但是现在，我有几个视图具有相同的标题，我想知道如何让它们共享相同的标题而不更改此文件，因为我仍然有一些页面我不想要标题。基本上，我是寻找一个“控件”我可以在我的视图之间共享，所以我不需要在我需要的每个视图中复制/粘贴我的标题。

我很确定在AngularJS中有一种方法可以做到这一点，但我无法在Google上找到我的答案，我想要的组件名称是什么？

谢谢！

Answer 1

如果您希望标题只出现在某些页面上，您可以：

一个。创建标题的指令，并在模板中包含此指令。

湾创建标题的指令，将其放在视图之外，让它隐藏/显示在某些页面上。例如，这可以通过监听angular的$ locationChangeSuccess事件来完成。

Answer 2

所以我按照Baszz的建议完成了我的指示。对于标题，我创建了一个具有范围变量的新指令（比如说'title'），以及指向HTML模板文件的链接：

        angular.module('next.directives', [])
.directive('nextHeader', function() {
    return {
        restrict:'E',
        transclude: true,
        replace : true,
        scope : {
            'title': '@'
        },
        templateUrl: "app/views/partials/header.html"
    }; 
});

在header.html文件中，我将模板设置为（简化）：

<h1>{{ title }}</h1>

从那里，无论我需要标题，我都可以写标签

<next-header title="My awesome title"></next-header>

将h1标签的“next-header”替换为相应的标题。这就是我想要的，来自ASP.NET MVC环境。

希望它可以帮助别人，欢呼

在AngularJS中的视图之间共享部分页面

2 个答案: