View Contents Of Angular Template On Page

- 1 answer

I have been looking for a while now and cannot seem to find the right answer to this question and I was hoping you all could help.

What I am trying to do is pass in a URL, through JSON, to my angular directive so I can display the contents/code in a template on the screen.

I am trying to create a directive cheat sheet, similar in design to that of Bootstrap's documentation page:

I have tried using ng-bind-html, but that only displays the URL I pass in.

My question is, can I pass in a template URL through JSON to a directive and have the contents/code of that file be displayed on the screen? Or do I need to copy all the code into the JSON file directly pass a string representation of the code to the directive?


Here is a sample of the JSON file I am building:

  "title":"Number Picker",
  "description":"An input box used to communicate a numeric value from the client to the server",

And here is a section of the directive I'm building:

<div class="row">
<div class="row">
    <div class="col-md-2">
        <span class="bold">Description:</span>
    <div class="col-md-10">
        <span ng-bind-html="directive.description"></span></p>
<p><span class="bold">Code:</span>
    <div class="code">
        <div ng-bind-html="directive.code"></div>


After a bunch of trial and error and many thanks to everyone that commented I figured out a solution.

This is the js code:

myApp.directive('directiveDetail', function($http){ return { restrict: 'E', templateUrl: 'js/directives/templates/directive-template.html', link: function(scope, element, attrs) { if (scope.directive.code) { $http.get(scope.directive.code).then(function (response) { scope.displaycode =; }); } } } });

I needed to access the scope parameter to gain access to the URL data. I also needed to add the if statement because if I don't pass in a valid URL then the the text displayed is the entire code for the DOM.