javascript - 将 HTML 内容从 Angular Controller 发送到网页

Question

我有一个从 here 构建的模板。我想让我的 Angular Controller 发送侧边栏中项目的 html，例如仪表板、快捷方式、概述等。

SO 上有一些关于此主题的帖子 Send html content with variables to template from controller AngularJS和 AngularJS data bind in ng-bind-html? 。但是，我似乎无法将这些问题/答案应用于我的问题。这是我正在使用的 html 代码的一部分，用于发送并显示 Angular Controller 。

 <li>
   <a>Admin Controls</a>
 </li>
 <li>
   <a href="#">Dashboard</a>
 </li>
 <li>
   <a href="#">Shortcuts</a>
 </li>
 <li>
   <a href="#">Overview</a>
 </li>

Answer 1

根据 Rahan Kawade 的指导，我得到了初步的工作答案。我使用 Angular 模板将 html 代码插入到 View 中并且它起作用了。需要注意的是，当使用模板通过 Angular 指令插入 html 代码时，确保 html 代码没有回车符非常重要(请参见选项 1)。如果是这样，该指令将不起作用。我确实提供了另一种选项来帮助提高 html 的清晰度和可读性，以防 html 变长并且选择使用 template 而不是 templateUrl (请参阅选项 2)。这是解决方案。

controller.js

选项 1

var adminAppCtrls = angular.module("app", [])
.directive('adminDash', function() {
    return {
        template: '<li><a>Admin Controls</a> </li><li><a href="#"> Dashboard </a></li> <li><a href="#">Shortcuts</a></li> <li><a href="#">Overview</a></li>'
    };
})

选项 2

var adminAppCtrls = angular.module("app", [])
.directive('adminDash', function() {
    var href = '<li><a>Admin Controls</a>'
    href += '</li><li><a href="#"> Dashboard </a></li>'
    href += '<li><a href="#">Shortcuts</a></li>'
    href += '<li><a href="#">Overview</a></li>'

    return {
        template: href
    };
})

查看

<div ng-app="app">
<h2>Custom directive with external page</h2>
<div adminDash></div>
</div>