Question

我正在尝试创建一个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: "" } } ]);

Answer 1

听起来像你正在寻找的是ui-view。（查看嵌套状态和视图部分以获取更多信息）。它允许你有一个特殊的元素

<div ui-view></div>

您可以根据角度应用程序的当前状态加载不同的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>

从AngularJS模板中删除元素

1 个答案: