1

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?

Ironori
  • 570
  • 2
  • 6
  • 19
  • I might need to add that I don't know how many DOM manipulations that will be there after page load completed. – Ironori May 14 '14 at 10:31
  • More contexts: I create an application where the user can generate page content. The user chooses from different modules and creates as many modules as he likes to have on the page. After choosing the module gets displayed on the website (a copy of HTML code will be added to the DOM). The user can change the settings of the module. And here I want to install a binding. For every module the user creates I want to have a dart object that takes the values that the user sets. Plus I want to be able to change those values via a controller and see the effects in the browser window. – Ironori May 14 '14 at 10:32

2 Answers2

1

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
  • 1,694
  • 14
  • 21
  • OK, I'm new to Angular and Dart and not an expert in DOM manipulation. I see that angular needs to know what were changed in the DOM. I realize that the binding is not established. I think ng-hide doesn't work as I want because I don't know how many times the DOM will be changed after page load (I add more contexts to my question above). For the same reason I think ng-repeat is no good. – Ironori May 14 '14 at 10:30
  • The approach of compiling the newly added directive sounds promising. It could be the same problem here that I need to know in advance how many times I want to insert HTML. I don't know this. I’m gonna read what is possible with $compile. – Ironori May 14 '14 at 10:32
  • You can compile new elements every time they are added to tho DOM. Maybe you could load the elements data in the $scope and use directives such as ng-repeat to keep the view up to date ? This is how it works the best. Building custom directives is also powerful. – AlexHv May 14 '14 at 10:44
  • It looks like $compile indeed is a way to solve my problem. I like the examples at the bottom of https://docs.angularjs.org/api/ng/service/$compile unfortunately those are written in JS and not Dart and I'm not sure if this service is implemented in dart. I only found this so far: https://docs.angulardart.org/#angular-core.Compiler. Now I understand what you mean by using ng-repeat, thank you. I give ng-repeat a try. – Ironori May 14 '14 at 14:33
  • @Günter Zöchbauer shows that this way of compiling works (I remember I used the _compiler in a validator). I should have enough Information to solve the problem :) – Ironori May 14 '14 at 14:41
0

@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

Community
  • 1
  • 1
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • I didn't see the first answer :) Thank you, I will try that code later (found it before, have to check why I thought it wasn't what I was looking for). – Ironori May 14 '14 at 10:35