CODEWITHSUNDEEP
angularjstwitter-bootstrap
user1884367
user1884367

Reputation: 425

AngularJS directives inside Bootstrap Modal not working

I am using AngularJS and Bootstrap in a single page application. I am displaying a form in a modal that has a captcha image. Unfortunately, the form is not functioning. It appears that none of the ng- directives are being followed. The code works fine when it is not in a modal. My stripped down code is as follows:

The Modal:

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

The controller:

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

}  
});

Upvotes: 1

Views: 2772

Answers (1)

madhead
madhead

Reputation: 33422

How do you pop your modal? Using jQuery? This will not work as the work take place out of Angular's computation loops. Try Angular-UI $modal service to pop your modal, it works perfect:

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

Template URL can point not only to external resource, so do not be afraid of extra http calls. You can use it with on-page markup, just wrap it in <script type="text/ng-template">

UPD: to answer the question in your comment:

HTML:

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

JS:

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

Upvotes: 3

Related Questions