Question

我正在尝试从我的角度模板中移除重复设计，在这种情况下是标题。标题模板如下：

<div class="page-header">
    <div class="clearfix">
        <h2>{{title}}</h2>
    </div>
    <hr class="colorgraph hidden-print">
</div>

每次我想要显示标题时都会包含此模板，例如

<div ng-init="title='Notes'" ng-include src="'/themes/templates/header.html'"></div>
<div ng-init="title='Other Notes'" ng-include src="'/themes/templates/header.html'"></div>

我遇到的问题是，最后一个包含的ng-init在覆盖所有其他包含之前覆盖所有其他包含所有其他标题，并显示最后一个标题（此处为“其他注释”）。

我的方法显然是错误的。这样做的正确方法是什么？我知道Angular Directives，但我无法理解将此问题用于我的问题的正确方法。

Answer 1

你必须使用指令，看看你是怎么写的，注意：代码没有经过测试，我只是给你一个想法

了header.html

<div class="page-header">
  <div class="clearfix">
  <h2>{{headerCtrl.title}}</h2>
 </div>
 <hr class="colorgraph hidden-print">
</div>

directive.js

angular.module("app", []);
angular.module("app")
 .directive("myHeader", myHeader);

function myHeader() {
 return {
    restrict: "E",
    scope: {
        title: '='
    },
    templateUrl: "header.html",
    controllerAs: "headerCtrl",
    bindToController: true,
    controller: function(){}
 };
}

您的网页：的index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body ng-app="app">

<!-- here we use our directive
you can use ng-route and ng-view to have multiple pages and change
the title  in your page controller
 -->

 <my-header title="mytitle1"></my-header>
 <my-header title="mytitle2"></my-header>
<script src="link to AngularJs"></script>
<script src="directive.js"></script>
</body>
</html>

Answer 2

事实证明，Angular Directives确实是正确的方式。有一个选项transclude可以满足我的需求：

了header.html

<div class="page-header">
    <div class="clearfix">
        <h2 ng-transclude></h2>
    </div>
    <hr class="colorgraph hidden-print">
</div>

的index.html

<heading>Create Booking</heading>

指令定义：

app.directive('heading', function() {
    return {
        transclude: true,
        templateUrl: '/themes/templates/header.html'
    };
});

Transclude使用heading标记之间的所有内容，并在当前范围内编译它。

AngularJS - 如何使用包括变量？

2 个答案: