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

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

Domanda

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?

È stato utile?

Soluzione

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.

Altri suggerimenti

@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

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top