html標簽未在Angularjs中使用ng-bind-html顯示

Question

我有這樣的html模板：

我想使用“ ng-bind-html”綁定此模板，如下所示：

 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); } ]); 

 <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> 

我什么也沒得到。 如何解決這個問題。

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在此問題上的評論：

當給定的字符串不是以“ <”開頭時，qLite會拋出該異常，它應該首先修剪字符串。

換句話說，您的HTML字符串必須是帶有開始和結束標記的“元素”。

將您擁有的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在模板字符串的前導空白處失敗

Answer 3

使用$ complie時，它將返回jqLit​​e對象，而不是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>