0

我偶然发现了 AngularJS 和元素创建的问题。简而言之：我需要创建一个包含 html 内容的元素，但我确实希望手头有对该元素的引用，这样我就可以对其执行一些操作，而无需在浏览器中实际呈现它。

我尝试执行以下操作：

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

哪种方法可以解决问题，但是...其中一些模板具有逻辑表达式。例如：

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

不幸的是，似乎当我尝试创建这样一个元素时，无论我是否使用$sce.trustAsHtml()这些条件ng-bind-html中的&字符都被转义为&amp;. 我在模板中得到的 html 如下所示：

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

请看一下小提琴：https ://jsfiddle.net/3uxdrp7b/1/

如果这是一个已知问题 - 我会很感激你指出我正确的方向，因为我一直在努力解决这个问题，但我无法让它发挥作用。我查看的每个示例在绑定中都有一个简单的 html - 除非我使用 cursed ，否则一切正常&。

4

1 回答 1

0

主要问题是元素在编译后没有立即更新。当前摘要周期完成后，它将包含正确的值。

<!-- 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 服务来接收即时结果可能更简单。

于 2017-10-24T21:22:42.883 回答