ng-bind-html sonsuz bir sindirme hatası verir ($ rootScope.infdig)

Question

Düzenli ng-bind ile bir işlev kullanırsam, her şey iyi görünüyor. Ancak ng-bind-html kullanacak olursam sonsuz sindirim hatası alırım.

=== View === 
1. <span ng-bind="test()"> 
2. <span ng-bind-html="test()"> 

=== Controller === 
1. $scope.test = function() { 
     return 1; 
    } 

2. myapp.controller('myapp', function($scope, $sce) { 
    $scope.test = function() { 
     return $sce.trustAsHtml('<input></input>'); 
    } 
}); 

Burada neler olduğu hakkında bir fikriniz var mı? Görünüm girişi oluşturur, ancak bu sonsuz hata digest error atar. Dokümantasyon da çok yararlı değil.

Answer 1

Sorun şu ki, ng-bind-html'unuz değerlendirildiğinde, Açısal, test işlevinizi çağırır ve $sce.trustAsHtml('<input></input>') sonucunu alır. Açısal, daha sonra her şeyin yerleşip yerleşmediğini görmek için tüm bağları tekrar değerlendirir. Bu, bir kez daha test fonksiyonunuzu çağırır ve dönüş değerinin eski değere uyup uymadığını görür. Maalesef öyle değil. Bunun nedeni, $ sce.trustAsHtml değerinden döndürülen değerlerin === aracılığıyla karşılaştırılamaz olmasıdır.

kanıtı olarak bu deneyin:

console.log($sce.trustAsHtml('<input></input>') === $sce.trustAsHtml('<input></input>')); 

yanlış yazdırmak edeceğimizi. Bu, her bir Açısal'nın test fonksiyonunuzu çağırdığı anlamına gelir, söz konusu olduğu sürece farklı bir değer döndürür. Birkaç kez dener ve sonra pes eder. Bunun yerine bir kapsam değişkeni yerine bir işlev çağrısı içine $ sce.trustAsHtml sonucunu bağlarsanız

, sorun ortadan kalkana:

$scope.input = $sce.trustAsHtml('<input></input>'); 

<span ng-bind-html="input"></span>