2016-12-15 18 views
0

私のコードにはモーダルポップアップがあります。これは図である。

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

そして、これは私がビューを更新しようとする方法である:

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

これは私がポップアップ表示さ方法です

ので
$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; 
    ... 
} 

、問題:私がutils.showAngularModal()を初めて呼び出すと、すべての価格が予想通りに動いています。しかし、私がブートストラップモーダルを閉じて再び開くと、ビューは更新されません。すべての値はちょうどscopeのように見えますが、変更が反映されません。誰でも、どうか、私が解決するのを助けてくれますか?

答えて

1

このようなものをコンパイルする必要があります。要素をスコープでのみコンパイルします。 rootScopeレベルでコンパイルすると、エラーや予期しない出力が発生することがあります。

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

またはあなたのコードのように、この

$compile(element)(angular.element(element).scope()); or 
$compile(element)(element.scope()); 
のようなものを試してみてください
関連する問題