我需要一些帮助与NG绑定-HTML创建的NG-模式。我在,我有与服务器的JSON文件的一些HTML和一些像这样的输入:
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": { ... } } }然后在我的HTML文件我有这样的:
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>而在我的角度控制器我有Ajax调用的JSON文件:
And in my Angular controller I have the ajax call for the JSON file:
控制器:
.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)}); }该HTML填充,但我不能用$留意使用这种方法生成的模型(Q)。
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?
在此先感谢...
推荐答案您必须编译动态创建的元素,让角度了解他们。
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); }); } }; });$超时用于运行编译功能,在 NG-绑定-HTML 完成其工作。
$timeout is used to run compile function, after ng-bind-html do its job.
现在你可以简单地把编译与 NG-绑定-HTML DIV的属性:
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>小提琴: jsfiddle/nZ89y/7/
更多推荐
如何观看与NG绑定
发布评论