从 AngularJS 模板中删除元素答案

【问题标题】：Remove element from an AngularJS template从 AngularJS 模板中删除元素
【发布时间】：2014-07-15 21:19:54
【问题描述】：

我正在尝试创建一个 AngularJS 模板，但在开发过程中，我想将其设置为具有一些我使用的样式表，我会将它们放在模板的一部分中，并且最好有一个包含正文的适当 HTML 文件也可以，但以后可能会出现。

所以我想要下面的 HTML 文件

<head>
<link
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
rel="stylesheet">
</head>
<h1>H1</h1>
<div class="row">
<div class="col-lg-12">
    Some text goes here?
</div>
</div>

但是当我渲染它时任何时候我使用templateUrl，我想删除头部部分。或者最好只在<body> 中包含以下 HTML 模板

<!DOCTYPE html>
<html>
<head>
<link
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
    <h1>H1</h1>
    <div class="row">
    <div class="col-lg-12">
        Some text goes here?
    </div>
    </div>
</body>
</html>

我最初的猜测是这样的，但这似乎不起作用。

directive("head", [ '$rootScope', '$compile',
function($rootScope, $compile) {
    return {
        restrict: "E",
        template: ""
    }
}
]);

【问题讨论】：

一个简单的解决方案是使用服务器端包含整个页面和部分模板网址

标签： angularjs

【解决方案1】：

在我看来，您正在寻找的是ui-view。（查看嵌套状态和视图部分了解更多信息）。它允许你拥有一个特殊的元素

<div ui-view></div>

根据 Angular 应用程序的当前状态，您可以在其中加载不同的 HTML。

您也可以使用ng-include。这是一个将为您呈现 HTML 的指令。

看起来像这样：

<div ng-include="MyPage.html"></div>

例如，您将拥有这个：

// MyPage.html
<div>
   Whatever you want goes here, and no need for a head element
</div>

【讨论】：

不，不满足我的要求，我希望包含的文件包含我想要排除的元素，而不是通过另一个文件包含它们。