Проблемы с принудительным экранированием символов при создании элемента AngularJs

Question

Я наткнулся на проблему с AngularJS и создания элементов. Вкратце: мне нужно создать элемент с содержимым html, но я хочу, чтобы ссылка на этот элемент была под рукой, чтобы я мог выполнить некоторые действия с ним, фактически не отображая его в браузере.

Я пытался сделать следующее:

var template = angular.element('<div>' + templateString + '</div>');
$compile(template)($scope);

который делает свое дело, но... Некоторые из этих шаблонов имеют логическое выражение в них. в примере:

<div ng-if="a && b">something</div>

К сожалению, кажется, что когда я пытаюсь создать такой элемент, независимо от того, использую ли я $sce.trustAsHtml() с ng-bind-html или нет & символы в этих условиях экранируются как &, HTML, который я получаю в шаблоне, выглядит так:

<div ng-if="a &amp;&amp; b">something</div>

Пожалуйста, взгляните на скрипку: https://jsfiddle.net/3uxdrp7b/1/

если это известная проблема - я был бы благодарен за то, что указал мне правильное направление, потому что я уже довольно долго бился об это и не могу заставить его работать. У каждого примера, на который я смотрел, был простой HTML внутри привязки - все работает нормально, если я не использую проклятый &,

Answer 1

Основная проблема заключается в том, что элемент не обновляется сразу после компиляции. Он будет содержать правильное значение после завершения текущего цикла дайджеста.

<!-- HTML -->
<div class="container" ng-app="app" ng-controller="DemoController">
  <h3>Result:</h3> <span ng-bind-html="el"></span>
</div>

// js
var app = angular.module("app", ["ngSanitize"]);
app.controller("DemoController", ["$scope", "$compile", "$timeout",
    function($scope, $compile, $timeout) {
    $scope.a = true;
    $scope.b = true;
    let contents = "<div ng-if='a && b'>something</div>";
    let compiled = $compile("<div>" + contents + "</div>")($scope);

    $timeout(function(){
      console.log(compiled.html());
      $scope.el = compiled.html();
    },0,true);
  }]);

Скрипка: https://jsfiddle.net/vy9svmop/

Возможно, в вашем случае проще использовать службу $interpolate для получения немедленного результата.