angular.js - `ng-bind-html`中的`ng-click`指令不生效
问题描述
js代码如下:
$scope.uploadInfo = $sce.trustAsHtml(’上传成功!<a ng-click='’+'quitTo(’customer’)'+’'>点击</a>跳转到客户列表界面’);//$scope.$apply();
html代码如下:
<p class='modal-content'> <p ng-bind-html='uploadInfo'> </p></p>
在浏览器中看到的dom结构如下:
点击图中文字链接没有任何响应,在“quitTo()”函数中设断点发现没有执行到。怎么才能让这里生效呢?我试了$scope.$apply(),还试了$compile(),发现都没有用。
问题解答
回答1:有别的方法,或能具体解释其原理的话,希望可以和我分享这个问题虽然自己解决了,但感觉不是非常理解。用的是
var uploadInfo = ’上传成功!<a ng-click='’+'quitTo(’customer’)'+’'>点击</a>跳转到客户列表界面’;var ele = $compile(uploadInfo)($scope);angular.element(’.modal-body’).append(ele);
没有用ng-bind-html和$sce.trustAsHtml()。
回答2:任何指令的生效都需要compile,这一步在app启动的时候angular先帮你做了,但你插入的html是没有经过compile这个步骤的,所以你手动compile下即可,之前自己写指令,动态插入元素时遇到过类似情况,欢迎继续交流。
相关文章:
1. android - 求 360浏览器 百度浏览器 搜狗浏览器的最新启动类名2. css - ul ol前边的标记如何调整样式呢3. 微信端电子书翻页效果4. css - 前端flex布局嵌套内层的布局不起作用?5. css3动画 - 实现css3推倒动画6. php laravel框架模型作用域7. python 读取csv文件可以读取但内容错误,但单独用excel打开正常,如何解决?8. javascript - 微信小程序 wx.downloadFile下载文件大小有限制吗9. html5 - HTML代码中的文字乱码是怎么回事?10. javascript - vue.js插件中的全局方法,全局资源和实例方法区别是什么?