如何观看使用ng-bind-html创建的ng-model

Question

我需要一些使用ng-bind-html创建的ng-model的帮助。我在服务器中有一个JSON文件，其中有一些html和一些类似的输入：

• .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文件中，我会看到以下内容：

    <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>

在我的Angular控制器中，我有一个JSON文件的ajax调用：

控制器：

    .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，但是我不能将$ watch用于通过这种方法生成的模型（q）。

我如何监视以此方式创建的模型的变化？

提前致谢…

Answer 1

您必须编译动态创建的元素，以便角度了解它们。

可以做到这一点的指令可能像这样：

    app.directive('compile',function($compile, $timeout){
        return{
            restrict:'A',
            link: function(scope,elem,attrs){
                $timeout(function(){                
                    $compile(elem.contents())(scope);    
                });
            }        
        };
    });

$timeout在ng-bind-html完成其工作后，用于运行编译功能。

现在，您只需将compilediv的属性设置为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/