Question

这是我的测试页面：

<div ng-controller="test">
  <input ng-keyup="asIwrite($event)" />
  <p id="entityContent"></p>
</div>

和我的控制员：

EntitiesApp.controller('test', ['$scope', function ($scope) {

    $scope.asIwrite = function ($event) {
        $('#entityContent').html($event.srcElement.value);
    }
}]);

这实际上是有效的，如果我在输入中写<a href="go/here">click</a>，该段落将保存可点击的网址（处理过的html）。

我正在使用 jQuery 来更新段落的内容，以便在页面中呈现时显示html元素。但是在我看来，使用 jQuery 是一种解决方法。

我想使用Angular实现这一点。我该怎么办？

注意：确定我可以从项目中删除jQuery并使用innerHTML 元素，但我想知道在Angular中这样做的方式绑定。我在段落元素上使用了 ng-bind 但只是按原样渲染textarea的值，不执行html进程。

Answer 1

见下面的工作示例。

你是对的，怀疑使用jQuery是正确的做法，正如你所期望的那样。这样做的角度方法是使用ng-model将输入注册到范围中，显示它的方法是使用ng-bind-html指令。（或者只是ng-bind，如果它是没有HTML的简单文本）

但是，Angular默认情况下不允许HTML绑定，因为它可能是一个安全问题。如果您确定自己撰写的内容，可以使用我的示例中显示的$scope.trustAsHtml。

＆＃13;

angular.module('test', [])

.controller('test', ['$scope', '$sce', function ($scope, $sce) {
  $scope.trust = function(content) {
    return $sce.trustAsHtml(content);
  }
}]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="test">
  <input ng-model="content"/>
  <p ng-bind-html="trust(content)"></p>
</div>

＆＃13;

Answer 2

您可能尝试过这样的事情，但内容并不像html那样出现

<input ng-model="input" />
<p id="entityContent" ng-bind-html="input"></p>

您需要确保严格的上下文转义，如下所述： https://docs.angularjs.org/api/ng/service/$sce

请记住，有角度的开发人员明确阻止您要执行的操作，以此作为缓解XSS攻击的方法

Answer 3

你不需要这样做，角度比那更简单。

<div ng-controller="test">
  <input ng-model="variable1" />
  <p id="entityContent">{{variable1}}</p>
</div>

Angular自动绑定变量。当输入值改变时，将打印新值。

如何使用angular和bindings处理html（？）

3 个答案: