$compile unusual Behaviour

Question

Angular version:1.3
I am trying to compile the html and generate the interpolated html. the ng-if code is getting commented out

html

<div ng-if="true">true</div>

I am using the above html as htmlTemplateDom

Controller

var htmlCompiledDom = $compile(htmlTemplateDom)($scope);
var div = angular.element("div#emailContent").append(htmlCompiledDom); 
console.log(div.html());

Console

<!-- ng-if:true -->

So the problem is ng-if is getting commented out. Someone help !!!!

Answer 1

As far as I know this is exactly how AngularJS works. AngularJS need this markers in the template. What would you expect instead?

Some of this comments can be deleted from template by disabling debug info in config :

$compileProvider.debugInfoEnabled(false);

After this almost all (but not all) markers will disappear and debugging Angular app will not be longer possible (for eg by ng-inspector chrome addon).

@Edit I'm not sure why console.log cutting content after comment but whole mechanism working good. Inspecting DOM:

<div id="emailContent">
    <!-- ngIf: true -->
    <div ng-if="true" class="ng-scope">true</div>
    <!-- end ngIf: true -->
</div>

Answer 2

I don't see any problems on $compile .

This example works just as expected, check if you're doing something different.

HTML:

<div ng-app="app" ng-controller="controller">
    <div id="compile">
    </div>
</div>

Javascript:

angular.module('app', [])
.controller('controller', function ($scope, $compile) {
    var template = '<div ng-if="true">true</div>';
    var content = $compile(template)($scope);
    angular.element('div#compile').append(content);
 });

If you want to execute it, take a look at this fiddle .