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代码插入到视图中并且它有效。重要的是要注意，当使用模板通过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>

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

1 个答案: