eckige Ansicht wird nach der zweiten nicht aktualisiert $ compile

Question

Ich habe Modal Pop-up in meinem Code. Dies ist die Ansicht:

<div class="modal fade in bs-example-modal-lg quickview__modal__bg" id="productModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" ng-controller="productController"> 
... 
<span ng-bind="salePrice | currency">$10.00</span> 
... 
</div> 

Dies ist, wie ich zeigen, Pop-up:

var utils = new function() { 
this.compileAngular = function(element) { 
      angular.element('*[ng-app]').injector().invoke(['$rootScope', '$compile', function($rootScope, $compile) { 
       $compile(element)($rootScope); 
      }]); 
     }, 
     this.showAngularModal = function(html) { 
      var modal = $(html).modal(); 
      utils.compileAngular(modal); 
      var dialog = modal.find('.modal-dialog'); 
      modal.css('display', 'block');     
      modal.modal('show'); 
     }, 
} 

Und das ist, wie ich versuche, um die Ansicht zu aktualisieren:

$scope.foo = function(){ 
     var data = ...; 
     ... 
     fooService.getPrice(data).success(function(result){ 
     $scope.newPrice = result && result.price ? result.price : 0; 
     $scope.updatePrice(); 
    }); 
} 

$scope.updatePrice = function(){ 
    ... 
    $scope.salePrice = $scope.newPrice; 
    ... 
} 

Also, das Problem: wenn ich utils.showAngularModal() zum ersten Mal und Update-Preis anrufen, funktioniert alles wie erwartet. Aber wenn ich bootstrap modal schließe und erneut öffne, wird die Ansicht nicht aktualisiert. Alle Werte kommen wie erwartet nur wie scope sieht keine Änderungen. Könnte mir bitte jemand helfen, zu lösen?

Answer 1

Sie müssen etwas wie das kompilieren. Kompilieren Sie das Element nur mit seinem Umfang. Das Kompilieren auf rootScope-Ebene kann einige Fehler oder eine unerwartete Ausgabe verursachen.

var throbberHolder = document.getElementById("throbber-mask"); 
$compile(throbberHolder)(angular.element(throbberHolder).scope()); 

oder als Code, versuchen Sie so etwas wie dieses

$compile(element)(angular.element(element).scope()); or 
$compile(element)(element.scope());