将 HTML 内容从 Angular 控制器发送到网页

Question

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

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

 <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 代码插入到视图中，并且它起作用了。需要注意的是，当使用模板通过 angular 指令插入 html 代码时，确保 html 代码没有回车很重要（参见选项 1）。如果是这样，该指令将不起作用。我确实提供了另一个选项来帮助提高 html 的清晰度和可读性，以防它变长并且选择使用模板而不是 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>