एनजी-बाइंड-एचटीएमएल

Question

के साथ बनाए गए एनजी-मॉडल के लिए कैसे देखें, मुझे एनजी-बाइंड-एचटीएमएल के साथ बनाए गए एनजी-मॉडल के साथ कुछ मदद की ज़रूरत है। मैं सर्वर जिसमें मैं कुछ html है में एक JSON फ़ाइल और इस तरह की कुछ आदानों है:

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

और मेरे कोणीय नियंत्रक में मैं 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)}); 
} 

एचटीएमएल आबादी है लेकिन मैं इस दृष्टिकोण से उत्पन्न मॉडल (क्यू) के लिए $ घड़ी का उपयोग नहीं कर सकता।

मैं इस तरह से बनाए गए मॉडल में बदलावों के लिए $ कैसे देख सकता हूं?

अग्रिम धन्यवाद ...

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 के बाद अपना काम करने के लिए इस्तेमाल किया जाता है।

अब आप बस compile div की विशेषता के रूप में 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/

Answer 2

जावास्क्रिप्ट:

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

एचटीएमएल:

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