[英]html tags not displaying using ng-bind-html in Angularjs
我有这样的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>
我什么也没得到。 如何解决这个问题。
我认为这里可能的解决方案是编写自己的指令,例如
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>
根据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>';
另请参阅:
使用$ 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.