如何观看与NG绑定-HTML创建NG-模型 [英] How to watch for ng-model created with ng-bind-html

问题描述

我需要一些帮助与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>

小提琴： http://jsfiddle.net/nZ89y/7/

这篇关于如何观看与NG绑定-HTML创建NG-模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！