Question

我的代码中弹出了模态。这是观点：

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

这就是我弹出的方式：

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

这就是我尝试更新视图的方式：

$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()并更新价格时，所有工作都按预期工作。但是当我关闭bootstrap模式并重新打开时，视图不会更新。所有值都按预期显示，看起来scope看不到变化。请有人帮我解决一下吗？

Answer 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());

第二次$ compile后，角度视图不会更新

1 个答案: