使用ng-bind-html时,Ng-click不能在控制器内部工作
ng-click not working inside the controller using of ng-bind-html
下面我的代码ng-click不工作,而我正在检查检查元素ng-click不显示,帮助我如何做
var app = angular.module('myApp', ['ngSanitize']);
app.controller('myCtrl', function($scope) {
$scope.firstName = "<b ng-click=test(1)>John</b><br><b ng-click=test1(1)>Testing</b>";
$scope.test=function(val)
{
alert(val)
}
$scope.test1=function(val)
{
alert(val)
}
});
<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular-sanitize.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<span ng-bind-html=firstName><span>
</div>
</body>
</html>
这段代码将解决您的问题。在你的控制器中添加这个指令。
directive('compileTemplate', function($compile, $parse){
return {
link: function(scope, element, attr){
var parsed = $parse(attr.ngBindHtml);
function getStringValue() { return (parsed(scope) || '').toString(); }
//Recompile if the template changes
scope.$watch(getStringValue, function() {
$compile(element, null, -9999)(scope); //The -9999 makes it skip directives so that we do not recompile ourselves
});
}
}
})
,你的HTML将像这样:
<div id ="section1" ng-bind-html="divHtmlVariable" compile-template></div>
你的ng-click
不工作的原因是因为,ng-bind-html
不编译div,你应该使用ng-if
那里或编译一个div并添加元素从指令而不是控制器。
标记
<div ng-app="myApp" ng-controller="myCtrl">
<span ng-if=showFirstName>
<b ng-click=test(1)>John</b><br><b ng-click=test1(1)>Testing</b>
<span>
</div>
$scope.showFirstName = true;//for showing div
问题是Angular不会解析ng-bind-html
中的指令。
一个正确的解决方案是自己创建一个指令来编译你包含的html
.directive('compile', ['$compile', function ($compile) {
return function(scope, element, attrs) {
scope.$watch(
function(scope) {
return scope.$eval(attrs.compile);
},
function(value) {
element.html(value);
$compile(element.contents())(scope);
}
);
};
}])
则可以将firstName
引用为<div compile="firstName"><div>
试试这个…这个链接解决了我的问题code:链接代码
添加指令
myApp.directive('compile', ['$compile', function ($compile)
相关文章:
- 为什么$scope和'这'关键字在控制器内部可互换使用
- AngularJS控制器内部的功能
- 控制器内部无法访问Angular js输入模型
- 控制器内部的scope函数不根据视图中的ng模型更新值
- 在angularjs中的控制器内部调用multipe$http
- 立即调用角控制器内部的函数,这是一个很好的实践
- Angularjs 测试控制器内部的异步行为
- 在 ng 选项之后完成控制器内部的回调函数
- Angular 1.5:访问控制器内部的绑定控制器属性
- 控制器内部的角度方法调用
- 从控制器内部获取表单数据
- Jasmine Test Access A Promise 在控制器内部
- 角度控制器内部的无限循环
- 如何在控制器内部设置配置
- http调用位于指令内部的控制器内部
- 控制器内部的角度位置固定(角度模态?)
- Angular JS控制器内部函数的作用域
- 在控制器内部,我如何判断它是从ng控制器还是从路由运行的
- 在指令控制器内部更新作用域
- 从外部触发Angular控制器内部的一个函数