Javascript - Execute HTML/Angular ng-include

Question

I'm using AngularJS to design a small app for searching. I have a div that's currently empty, and after running a function, for it to replace it with a div that has ng-include. The div replaces just fine, but ng-include doesn't load up.

I'm currently running the following in console for testing to see get it running. How would I go about getting this to work? Any help is appreciated!

document.getElementById("resultsDiv").innerHTML = '<div ng-include="" src=" \'sr.html\' "></div>';

score 2 · Answer 1 · answered Nov 11 '13 at 20:29

2

read about angularjs $compile function

answered Nov 11 '13 at 20:29

konclave

648
1
7
19

1

Took a couple reads though it, but I don't see a working method of compiling after clicking a button (which will run through my function and compile it last). Would you happen to have an example? – Dustin Nov 11 '13 at 21:26

score 1 · Answer 2 · edited May 23 '17 at 12:22

I don't know why you need to make this JavaScript-call, but its definitely no the 'angular-way'. If you need to conditionally include html, i would recommend using ng-if, ng-hide, ng-show or even ng-switch.

You could do something like this:

// somewhere in your controller 
$scope.triggerSomeInclude = true;

// in your template
<div ng-if="triggerSomeInclude">
    <div ng-include ="'someFile.html'"></div>
</div>

Another approach would be using a directive. They are the only place, where selecting an element directly could make sense (although even there it usually doesn't to select an element via id). But as I said, it's hard to stay what the best method would be, as I'm not sure what you're trying to achieve.

Although you're not using jQuery, what you're trying to do looks very jQueryesque (awful word) as you're selecting an element directly seemingly totally detached from the $digest and $compile-cycles of angular, so I also would recommend to read this answer: "Thinking in AngularJS" if I have a jQuery background?

score 1 · Accepted Answer · answered Nov 14 '13 at 20:54

In the end, the method I used was templating example used for ngInclude.

http://docs.angularjs.org/api/ng.directive:ngInclude

Inside my controller, for example, by default it would set the following:

$scope.mainDivTemplate = {url: 'partials/test1.html'}

If I wanted to switch it to something else, I'd call a function that would look a little something like this.

$scope.loadHome = ->
    $scope.mainDivTemplate = {url: 'partials/home.html'}
    $scope.$apply()

Javascript - Execute HTML/Angular ng-include

3 Answers3