为什么angular不解析我的模板？

Question

I have an angular directive where I'm compiling a template via the templateCache after the directive has loaded. For some reason, my {{}} is being output in the template instead of being parsed and replaced with their respective values. Does anybody know why?

The template looks like this

 <script type="text/ng-template" id="input">
        <input class="cirque-input" ng-model="model" value="{{model}}" type="{{fieldtype}}" ng-change="updateForm()" />
  </script>

and in my directives link function, I get the template and display it with

 var tmpUrl=$templateCache.get(scope.template);
  elm.html(tmpUrl);
  $compile(elm.contents())(scope);

clearly I'm doing something wrong here, but I can't figure out what.

Answer 1

Compile first and then replace element with new html:

    var tmpUrl=$templateCache.get(scope.template);  
    var compiledContents = $compile(elm.contents())(scope);
    // here i'm not sure about the html method
    elm.html(compiledContents); 
    // maybe you have to use 
    // elm.replaceWith(compiledContents[0])

Answer 2

I had a similar problem but I use replace... you may want to try:

var tmpUrl=$angular.element($templateCache.get(scope.template));
elm.append(tmpUrl);
$compile(tmpUrl)(scope);

or

var tmpUrl=$angular.element($templateCache.get(scope.template));
elm.append(tmpUrl);
$compile(elm)(scope);