html标签在Angularjs中未使用ng-bind-html显示
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>';
另请参阅:
- $compile在模板字符串的前导空白处失败
当您使用$complex时,它将返回一个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>
相关文章:
- 显示&作为&在jsp中使用angularjs而不使用ng-bind-html
- 输入字段未使用 ng-keydown 事件更新
- 为什么我的指令是't使用ng-bind-html指令
- 在Angular中,在类中使用ng-bind
- angular ng show/ng hide无法正确使用ng bind html
- Angularjs selectbox 在使用 ng-bind-html 时不反映底层 ng-model
- 为什么AngularJS在使用ng-bind-html时会去除数据属性
- ng-click在使用ng-bind-html-unsafe绑定的模板时不起作用
- Angular 中的无限循环使用 ng-bind
- Angular.js:如何使用ng-bind来显示concat.数组的元素作为字符串
- AngularJS-将模型绑定到未使用ng repeat创建的输入
- html标签在Angularjs中未使用ng-bind-html显示
- 使用ng-bind-html添加文本字段
- 使用ng-bind-html和默认内容操作内容
- AngularJS:如何使用ng-bind-html将事件绑定到动态生成的html
- 如何在指令内部用innerHTML插入的html上使用ng-bind
- 使用ng-bind-html从Angular Array中生成Iframe视频
- 变量不使用ng-bind呈现
- 使用ng-bind-html设置HTML中的Angular绑定
- 如何使用ng-bind-html运行javascript