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({...}); 
    } 
}