角度コントローラからウェブページにHTMLコンテンツを送信

Question

私はhereからビルドしたこのテンプレートを持っています。私は角度コントローラーに、ダッシュボード、ショートカット、概要などの項目の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からの指針に基づいて、私は初期の仕事の答えを得ることができました。私はビューにhtmlコードを挿入するために角テンプレートを使用し、それは働いた。テンプレートを使用して角度指示文でhtmlコードを挿入する場合、htmlコードにキャリッジリターンがないことを確認することが重要です（オプション1を参照）。そうであれば、指令は機能しません。私は、長い時間がかかり、templateUrlの代わりにテンプレートを使うことを選択した場合（オプション2を参照）、HTMLの明快さと可読性を向上させるための別のオプションを提供しました。ここに解決策があります。

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>