Evaluating moustache expressions after the page was initialized (dynamic binding)

StackOverflow https://stackoverflow.com/questions/23640874

Вопрос

I have a HTML-Document containing moustache expressions that angular-dart evaluates very well:

</head>
<body ng-cloak>
  <ctrlTextElements>
    <div id="stage">outside: {{ctrlTextElements.test1('three')}}</div> 
  </ctrlTextElements>

I want to dynamicaly add some HTML with moustache expression like so:

CtrlTextElements.addTextElement(mousePos.x, mousePos.y);
var div = dom.querySelector('#stage');
  HttpRequest.getString("../path/text.html").then((r) {
      div.children.add(new Element.html(r, validator: new AllowAllValidator()));
  });

The content of the added text.html looks like this:

<div>inside: (not evaluated): {{ctrlTextElements.test1('three')}}</div>

That's the result in the browser:

outside: three
inside: (not evaluated):{{ctrlTextElements.test1('three')}}

How can I reevaluate the moustache expressions inside content that has been applied after the page was loaded?

Это было полезно?

Решение

The problem is that you are mixing jQuery like logic with angular logic here : manipulating the dom 'by hand' is rarely a good solution.

The problem here is that your newly added binding has not been compiled by angularjs = it has not been indexed as a directive that should be watched for and updated when scope changes.

Either you try a more angular way, for example using ng-hide or ng-repeat directive to display your content according to the controllers $scope (or another custom directive), or you try to $compile your newly added directive ( but this is bad ) : https://docs.angularjs.org/api/ng/service/$compile .

Maybe try in your controller : $scope.$compile( div );

Not sure of the syntax though. Maybe you would need to write 

<span ng-bind="..."></span>

instead of 

{{ ... }}

to make it work.

Другие советы

@Alexhv is right. Sorry for my previous answer. I assumed it is about Polymer. Was already time for bed.

You can find a code example in my answer to this question: setInnerHtml doesn't evaluate Mustache

The pub package bwu_angular (http://pub.dartlang.org/packages/bwu_angular) contains this code as a Decorator (Directive) named bwu-safe-html

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top