- 首页
- 其他开发
- 如何观察使用 ng-bind-html 创建的 ng-model
如何观察使用 ng-bind-html 创建的 ng-model
[英] How to watch for ng-model created with ng-bind-html
<br><div class="nextBtn"><a href="#test/6" class="btn btnNext" ng-click="save()">继续></a>
在我的 Angular 控制器中，我对 JSON 文件进行了 ajax 调用:
控制器:
.controller('testCtrl', ['$scope', '$http', 'myService', '$sce',函数($scope，$http，myService，$sce，){$http.get(urls.url_otis).success(function(data, status){angular.forEach(data.test, function(value, key){var q = data.test[key];q[键] = 键；q.question = $sce.trustAsHtml(q.question);q.options = $sce.trustAsHtml(q.options);$scope.questions.push(q);});}).error(function(data, status){console.log(status)});}
html 已填充，但我无法将 $watch 用于使用此方法生成的模型 (q).
如何监视以这种方式创建的模型的变化?
提前致谢...
解决方案
你必须编译动态创建的元素，让 angular 知道它们.
可以做到这一点的指令可能如下所示:
app.directive('compile',function($compile, $timeout){返回{限制:'A'，链接:功能(范围，元素，属性){$超时(功能(){$compile(elem.contents())(scope);});}};});
$timeout 用于运行编译函数，在 ng-bind-html 完成它的工作后.
现在你可以简单地把 compile 作为 div 的属性和 ng-bind-html :
<div class="questions" ng-repeat="问题中的项目" ng-show="questions.length" ><div ng-bind-html="item.question"></div><div compile class="options" ng-bind-html="item.options"></div>
小提琴:http://jsfiddle.net/nZ89y/7/
I need some help with an ng-model created with ng-bind-html. I have a JSON file in the server in which I have some html and some inputs like this:
*.json
{
"test": {
"1": {
"question":"<span>1. something:</span>",
"options":"<input type='radio' name='q1' ng-model='q.1' value='a'>a) op 1<br><input type='radio' name='q1' ng-model='q.1' value='b'>b) op 2<br><input type='radio' name='q1' ng-model='q.1' value='c'>c) op 3<br><input type='radio' name='q1' ng-model='q.1' value='d'>d) op 4<br><input type='radio' name='q1' ng-model='q.1' value='e'>e) op 5<br>",
"answer":"c"
},
"2": {
...
}
}
}
Then in my HTML file I have something like:
<div class="testContent">
<div class="test">
<div class="questions" ng-repeat="qs in questions" ng-show="questions.length">
<div ng-bind-html="qs.question"></div>
<div class="options" ng-bind-html="qs.options">
</div>
</div>
</div>
<br>
<div class="nextBtn">
<a href="#test/6" class="btn btnNext" ng-click="save()"> continue ></a>
</div>
</div>
And in my Angular controller I have the ajax call for the JSON file:
controller:
.controller('testCtrl', ['$scope', '$http', 'myService', '$sce',
function($scope, $http, myService, $sce, ){
$http.get(urls.url_otis).success(function(data, status){
angular.forEach(data.test, function(value, key){
var q = data.test[key];
q[key] = key;
q.question = $sce.trustAsHtml(q.question);
q.options = $sce.trustAsHtml(q.options);
$scope.questions.push(q);
});
}).error(function(data, status){console.log(status)});
}
The html is populated but I cannot use $watch for the model (q) generated with this approach.
How can I $watch for changes in the models created in this way?
Thanks in advance...
解决方案
You have to compile dynamically created elements to let angular know about them.
Directive which can do that may look like this one:
app.directive('compile',function($compile, $timeout){
return{
restrict:'A',
link: function(scope,elem,attrs){
$timeout(function(){
$compile(elem.contents())(scope);
});
}
};
});
$timeout is used to run compile function, after ng-bind-html do its job.
Now you can just simply put compile as attribute of div with ng-bind-html:
<div class="questions" ng-repeat="item in questions" ng-show="questions.length" >
<div ng-bind-html="item.question"></div>
<div compile class="options" ng-bind-html="item.options"></div>
</div>
Fiddle: http://jsfiddle.net/nZ89y/7/
这篇关于如何观察使用 ng-bind-html 创建的 ng-model的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
