HTML 字符串未与 angular 绑定

Question

<!DOCTYPE html
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<p ng-bind-html="myText"></p>

</div>

<script>
var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
    $scope.myText = "<input type='text' value='here'>";
});
</script>

<p><b>Note:</b> This example includes the "angular-sanitize.js",
which has functions for removing potentially dangerous tokens from the HTML.</p>

</body>
</html>

我也是 angular 的新手。我无法将 html 文本绑定到 angular 视图。任何建议都会有所帮助。

Answer 1

你应该像这样使用 $sce.trustAsHtml()

$scope.myText=$sce.trustAsHtml("<input type='text' value='here'>")

Like this fiddle

但是你不能将范围变量绑定到你的 html 所以最好的方法是编写一个可以用 ng-bind-html-unsafe 替换的指令像

.directive('bindUnsafeHtml', ['$compile', function ($compile) {
      return function(scope, element, attrs) {
          scope.$watch(
            function(scope) {
              // watch the 'bindUnsafeHtml' expression for changes
              return scope.$eval(attrs.bindUnsafeHtml);
            },
            function(value) {
              // when the 'bindUnsafeHtml' expression changes
              // assign it into the current DOM
              element.html(value);

              // compile the new DOM and link it to the current
              // scope.
              // NOTE: we only compile .childNodes so that
              // we don't get into infinite loop compiling ourselves
              $compile(element.contents())(scope);
            }
        );
    };
}])

working fiddle

HTML 字符串未与 angular 绑定

HTML string not binded with angular

angularjs

ng-bind-html