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

Bootstrap Modal中的AngularJS指令不起作用

1 个答案: