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
– Rohan Kawade, Commented Jun 27, 2017 at 4:58
I don't know how to write my own directive. Could you provide an example? — Val
– Val, Commented Jun 27, 2017 at 5:16

Val · Accepted Answer · 2017-06-27 20:53:50Z

1

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>

edited Jun 27, 2017 at 20:53

answered Jun 27, 2017 at 20:10

Val

1,3505 gold badges23 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rohan Kawade Over a year ago

Yes, this is what I was suggesting..does it works the way you expected?

Val Over a year ago

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.

Collectives™ on Stack Overflow

Send HTML Content from an Angular Controller to Webpage

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related