Wie für ng-Modell mit ng-bind-html zu sehen

Question

Ich brauche Hilfe mit einem ng-Modell erstellt mit ng-bind-html. Ich habe eine JSON-Datei auf dem Server, in dem ich einige HTML und einige Eingaben wie diese:

* .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": { 
     ... 
    } 
    } 
} 

Da ist in meiner HTML-Datei Ich habe so etwas wie:

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

Und in meinem Angular Controller habe ich den ajax-Aufruf für die JSON-Datei:

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)}); 
} 

Der HTML-Code ist ausgefüllt, aber ich kann $ watch nicht für das mit diesem Ansatz erzeugte Modell (q) verwenden.

Wie kann ich auf Änderungen in den so erstellten Modellen achten?

Vielen Dank im Voraus ...

Answer 1

Sie haben dynamisch erstellte Elemente zu kompilieren über sie Winkel wissen zu lassen.

Richtlinie, die das tun kann wie dieser aussehen:

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

$timeout verwendet wird, laufen Funktion zu kompilieren, nachdem ng-bind-html seine Arbeit tun.

Jetzt können Sie einfach nur compile als Attribut von div setzen mit 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/

Answer 2

javascript:

app.controller('demoController', function($rootScope, $scope, $http, $compile){ 
var arr = [ 
    '<div>I am an <code>HTML</code>string with <a href="#">links!</a> and other <em>stuff</em></div>' 
    ,'<div>name: <input ng-model="user.name" /></div>' 
    ,'<div>age: <input ng-model="user.age" /></div>']; 

    $scope.user={}; 
    $scope.testChange2 = function(){ 
     var compileFn = $compile(arr[Number.parseInt(Math.random()*10)%3]); 
     var $dom = compileFn($scope); 
     $('#test').html($dom); 
    }; 
}); 

html:

<div ng-controller="demoController"> 
    <button type="button" class="btn w-xs btn-info" ng-click="testChange2();" >test2</button> 
    <hr/> 
    <div id = "test"></div> 
    <hr/> 
    <div>user:{{user}}</div>