Question

我有这样的html模板：

我想使用＆＃34; ng-bind-html＆＃34;绑定此模板，如下所示：

＆＃13;

angular.module('bindHtmlExample', ['ngSanitize'])
  .controller('ExampleController', ['$scope', '$compile',
    function($scope, $compile) {
      var templateHTML =
        'I am an <code>HTML</code>string with ' +
        '<span class="pointer"><i class="icon-refresh pointer" ng-click="refresh()"></i></span>';
      $scope.myHTML = $compile(templateHTML)($scope);
    }
  ]);

＆＃13;

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular-sanitize.js"></script>

<div ng-app="bindHtmlExample">
  <div ng-controller="ExampleController">
    <p ng-bind-html-unsafe="myHTML"></p>
    <p ng-bind-html="myHTML"></p>
  </div>
</div>

＆＃13;

我没有得到任何东西。如何解决这个问题。

Answer 1

我认为这里可能的解决方案是编写自己的指令，如

angular.module('bindHtmlExample', ['ngSanitize'])
    .controller('ExampleController', ['$scope', '$compile', function ($scope, $compile) {
    var templateHTML =
        '<div>I am an <code>HTML</code>string with ' +
        '<span class="pointer"><i class="icon-refresh pointer" ng-click="refresh()">i</i></span></div>';
    $scope.myHTML = templateHTML;

    $scope.refresh = function () {
        console.log('refresh')
    };
}]);

angular.module('bindHtmlExample').directive('myHtml', ['$compile', function ($compile) {
    return {
        restrict: 'A',
        link: function link($scope, $element, attrs) {
            attrs.$observe('myHtml', function (value) {
                var $el = $compile(value)($scope);
                $element.empty().append($el)
            })
        }
    }
}])

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular-sanitize.js"></script>

<div ng-app="bindHtmlExample">
    <div ng-controller="ExampleController">
        <p ng-bind-html-unsafe="myHTML"></p>
        <p ng-bind-html="myHTML"></p>
        <p my-html="{{myHTML}}"></p>
    </div>
</div>

Answer 2

根据Vojta在this issue中的评论：

当给出一个不以＆＃34;＆lt;＆＃34;开头的字符串时，qLite会抛出，它应该首先修剪字符串。

换句话说，您的HTML字符串必须是＆＃34;元素＆＃34;带有开始和结束标签。

将您拥有的HTML字符串放入div容器中：

var templateHTML =
    '<div>I am an <code>HTML</code>string with ' +
    '<span class="pointer"><i class="icon-refresh pointer" ng-click="refresh()"></i></span></div>';

另见：

$compile fails on leading whitespace of template string

Answer 3

当你使用$ complie时，它将返回一个jqLite对象，而不是HTML字符串。但是，ngBindHTML的变量值应该是包含HTML的字符串。这就是为什么你看不到结果的原因。

根据您的情况，使用Directive而不是Controller来插入HTML会更好。请参阅我的Codepen：http://codepen.io/jennieji/pen/jhnCk

JS：

  angular.module('bindHtmlExample', ['ngSanitize'])
  .controller('ExampleController', ['$scope', '$interpolate',
    function($scope, $interpolate) {
      var templateHTML =
        'I am an <code>HTML</code>string with ' +
          '<span class="pointer"><i class="icon-refresh pointer" ng-click="refresh()">{{ bindText }}</i></span>';
      $scope.bindText = 'Refresh()';
      $scope.refresh = function() {
        console.log('refresh() runned.');
      };
      $scope.interpolate = $interpolate(templateHTML)($scope);
    }
  ])
  .directive('exampleDirective', ['$compile', function($compile){
    return function(scope, element){
       var templateHTML =
        '<p>I am an <code>HTML</code>string with ' +
          '<span class="pointer"><i class="icon-refresh pointer" ng-click="refresh()">{{ bindText }}</i></span></p>';
       element.append( $compile(templateHTML)(scope) );
    };
  }]);

HTML：

    <div ng-app="bindHtmlExample">
      <div ng-controller="ExampleController" example-directive>
        <p ng-bind-html-unsafe="interpolate"></p>
        <p ng-bind-html="interpolate"></p>
      </div>
    </div>

在Angularjs中不使用ng-bind-html显示html标签

3 个答案: