View from multiple partials (loaded dynamically) in angular.js

Question

I would like to create a view consisting of multiple partials which would be loaded dynamically depending on content type. I am new to angular.js, and the only idea I have is to do it like that in controller:

$(elem).html(string_with_src);
$compile(elem.contents())($scope);

...and it works. The thing is I wanted to put the source of partials in separate files and load them through jquery:

$.get(source.html, function( data ) {
  elem.html( data );
  $compile(elem.contents())($scope);
});

but this doesn't work. The template is not compiled by angular.js. Could someone explain to me why it doesn't work or how to do it better?

Why do you use jquery for ajax calls on your angularjs code? — Ben Diamant
– Ben Diamant, Commented Dec 16, 2014 at 14:04

New Dev · Accepted Answer · 2014-12-16 15:36:10Z

2

DON'T use jQuery for this.

Angular provides a directive to load partials: ng-include:

<div ng-include="'/path/to/partial.html'"></div>

(notice the double quotes "' when passing a static string)

You could also use a dynamic path:

$scope.pathToPartial = "/path/to/partial/" + partialName + ".html";

<div ng-include="pathToPartial"></div>

answered Dec 16, 2014 at 15:36

New Dev

49.8k12 gold badges99 silver badges139 bronze badges

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

Collectives™ on Stack Overflow

View from multiple partials (loaded dynamically) in angular.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related