將HTML內容從Angular控制器發送到網頁

Question

我有從這里構建的模板。 我想讓我的角度控制器將側邊欄中的項目（例如儀表板，快捷方式，概述等）發送給html。

關於此主題，有一些關於SO的帖子從控制器AngularJS向模板發送帶有變量的html內容，並且ng-bind-html中的AngularJS數據綁定？ 。 但是，我似乎無法將這些問題/答案應用於我的問題。 這是我正在使用的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）的指導下，我得到了一個初步的工作答案。 我使用了角度模板將html代碼插入到視圖中，並且可以正常工作。 重要的是要注意，當使用模板通過angular指令插入html代碼時，重要的是要確保html代碼沒有回車符（請參閱選項1）。 如果是這樣，該指令將不起作用。 我確實提供了另一種選擇來幫助提高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>