Bootstrap模式中的AngularJS指令不起作用

Question

我在单页应用程序中使用AngularJS和Bootstrap。我正在以具有 验证码图像的模式显示表单。不幸的是，表单不起作用。看起来，没有任何的ng-指令是 被跟踪。当代码不在模式中时，代码可以正常工作。我剥离下来的代码如下：

模态：

<div class = "modal fade" id = "contact" role ="dialog"> 
<div class = "modal-dialog"> 
    <div class = "modal-content"> 
     <div class = "modal-header"> 
      <h4>Email</h4> 
     </div> 

     <div class = "modal-body">     
      <div ng-controller="formController"> 
       <div class = "table-responsive"> 
        <table class="table table-striped table-bordered"> 
        <tr ng-repeat="x in emails"> 
        <td>{{ x.email }}</td> 
        </tr> 
        </table> 
       </div> 

      <form ng-submit = "processForm()" class="form-horizontal" role="form"> 
      <div class="form-group form-group-sm"> 
       <label for="email">Email address:</label> 
       <input type="email" name = "email" class="form-control" id="email" placeholder = "Enter Email"> 
      </div> 
      <button type="submit" class="btn btn-default">Submit</button> 
      //display a captcha image with ability to refresh 
      <img class = "img-responsive" src="{{url}}" ng-click="refresh()">Refresh</img> 

      </form>  
      </div>  
     </div> 

     <div class = "modal-footer"> 
      <a class = "btn btn-primary" data-dismiss = "modal">close</a> 
     </div>   
    </div> 
</div> 

控制器：

myApp.controller('formController', function($scope,$http){ 
    $scope.url = 'http://www.example.com/captcha/captcha.php?'+Math.random(); 
    $scope.refresh = function() { 
    $scope.url = 'http://www.example.com/captcha/captcha.php?'+Math.random(); 
}; 

$scope.formData = {}; 
$scope.processForm = function() 
{ 
$http({method: 'GET', url: 'http://www.example.com/emails.php?email='+$scope.formData.email}).success(function(response)  
{$scope.emails = response;}); 

} 
}); 

Answer 1

你怎么弹出你的模式？使用jQuery？这不会像Angular的计算循环中发生的那样工作。尝试Angular-UI$modal服务，弹出的模式，它可以完美运行：

$http({ 
    ... 
}).success(function(data){ 
    $modal.open({ 
     'templateUrl': '...', 
     'controller': ..., 
     'resolve': ... 
    }) 
}) 

模板URL可以不仅指向外部资源，所以不要害怕额外的HTTP调用。您可以对网页的标记使用它，只是wrap it in <script type="text/ng-template">

UPD：回答您的评论的问题：

HTML：

<a data-ng-click="showPopup()">Show me!</a> 

JS：

function Ctrl($scope, $modal){ 
    $scope.showPopup = function(){ 
     $modal.open({...}); 
    } 
}