Search code examples
angularjsdartangular-dartcurly-braces

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

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?

Solution

  • 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.