Send HTML Content from an Angular Controller to Webpage

Question

I have this template I building from here. I would like to have my angular controller send the html for items in the sidebar like the dashboard, shortcut, overview, etc.

There are some post on SO about this topic Send html content with variables to template from controller AngularJS and AngularJS data bind in ng-bind-html?. However, I can't seem to apply these question/answers to my problem. Here is a portion of the html code I am working with to get the angular controller to send and have displayed.

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

You can write your own custom directive and inside the directive you can provide URL for your template(Dashboard Items in your case) which needs to displayed on view. — Rohan Kawade, Jun 27 '17 at 04:58
I don't know how to write my own directive. Could you provide an example? — Val, Jun 27 '17 at 05:16

Val · Answer 1 · 2017-06-27T20:53:50.790

Based on guidance from Rahan Kawade, I was able to get an initial working answer. I used angular template to insert html code to the view and it worked. It is important to note, when inserting html code through the angular directive using template, it is important to ensure the html code has no carriage returns (See option 1). If it does, the directive will not work. I did supply another option to help improve the clarity and readability of the html for in the case it become long and one choose to use template instead of templateUrl (See option 2). Here is the solution.

controller.js

Option 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>'
    };
})

Option 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
    };
})

view

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

Yes, this is what I was suggesting..does it works the way you expected? — Rohan Kawade, Jun 28 '17 at 02:50
Yea, it works great. I'm very happy to reach this milestone in creating a custom template. It would be good if someone could mark the answer correct so others know this is a working solution. — Val, Jun 28 '17 at 04:31

Send HTML Content from an Angular Controller to Webpage

1 Answers1