AngularJS - Render multiple strings and HTML files in a single tag

Question

I want to render template files (view + controller) and multiple html strings both together in a single tag. - So I have some strings like

<p>some text</p>

and html files + controller like

template.html + template.controller.js

I want to render the strings and the template.html into one tag.

I already connected the html strings and I'm able to render these with

<div ng-bind-html="template" ..></div>

Can I serialize the html files and render it in ng-bind-html too? These files have own controllers:

<div ng-controller="sampleCtrl">

They would lose functionality?

NOTE: The order of the elements is important!!! For example, I want to render the string, then the content of the file and then again a string.

Thanks a lot!

Because I want to add strings like "<p>test</p>" too, and ng-include is only for urls. — Max Berg
– Max Berg, Commented Jun 17, 2015 at 15:17
Not sure but I think what you want are directives combining controllers and templates... docs.angularjs.org/guide/directive — mattanja
– mattanja, Commented Jun 17, 2015 at 15:17
Am I able to include multiple files with a single ngInclude? — Max Berg
– Max Berg, Commented Jun 17, 2015 at 15:17
@MaxBerg no but you could ng-repeat ng-nclude iterating over the Urls. — Wawy
– Wawy, Commented Jun 17, 2015 at 15:20

BobDoleForPresident · Accepted Answer · 2015-06-17 15:32:02Z

2

You should use directives. This will allow you to load a html file with an associated js file. You can set scope.someText in the directive and call it in the view e.g.

 <p>{{someText}}</p>

Directive:

var app = angular.module('myApp');

app.directive('someTextDirective', function(){
    return{
         restrict: 'E',
         templateUrl: 'path/to/html/file.html',
         link:function(scope){
              scope.someText = 'blah';
         }
    }
});

Simply call the directive in your html:

<some-text-directive></some-text-directive>

Hope this helps. If I have not been clear let me know and I will do my best to clarify.

answered Jun 17, 2015 at 15:32

BobDoleForPresident

5529 silver badges23 bronze badges

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

3 Comments

Max Berg Over a year ago

Thanks a lot!! Is this also possible with multiple template urls? For example, If i wanna join two strings with two templates?

Max Berg Over a year ago

oke, maybe i can combine the strings and templates in the template of the directive. In the template of the directive I can ng-repeat over ng-include and also render the strings.

BobDoleForPresident Over a year ago

Possibly. Instead of templateUrl you could also use template. Template simply takes html code instead of pointing to a file e.g. template: '<p>{{someText}}</p>'

Collectives™ on Stack Overflow

AngularJS - Render multiple strings and HTML files in a single tag

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related