AngularStrap - modal doesn't hide

Question

I have modal invoked with just HTML tags:

<button class="btn btn-xs stop" data-template-url="template/modal.html"
        bs-modal="modal">
</button>

but after that I can only close my modal with "Close" button, not "Save changes".

This is my external modal template:

<div class="modal" id="modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document" ng-controller="modalController">
    <div class="modal-content">
        <div class="modal-header">
           <h4 class="modal-title" id="task_id"> Task #{{clickedStop}}</h4>
        </div>
        <div class="modal-body">
            <textarea  id="description" class="form-control" placeholder="Description of work on a task"></textarea>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" ng-click="$hide()">Close</button>
            <button type="button" class="btn btn-primary" ng-click="saveModal()">Save changes</button>
        </div>
    </div>
</div>

and my modalController:

app.controller('modalController', function($scope, $rootScope){

$scope.saveModal = function (){

    $scope.ticket_id = $rootScope.clickedStop;
    var tickets = localStorage.getItem($scope.ticket_id);
    var task = JSON.parse(tickets);

    $scope.description = jQuery("#description").val();
    if($scope.description == "" || $scope.description == undefined)
    {
        alert("You must enter description!");
        return;
    };

    var save = JSON.stringify({
        ":task_id":$scope.ticket_id,
        ":creator":task.creator,
        ":date_created":task.start,
        ":owner":task.owner,
        ":title":task.title,
        ":description":$scope.description
    });

        jQuery.ajax({
            url:"engine/saveActivity.php",
            method: "POST",
            data:{data:save},
            dataType:'json'
        })
            .success(function (responce){
            if (responce === true){
                console.log("Activity saved!");
                //I wont to close modal here

            }

        }).error(function(data){
               console.log("Error Activity save!"+ data);
            });

};

When I tried to use $hide(), I get an error that $hide is not a function.

Do you have a reference to your modal? How and where do you open it? You can't just call $hide since that not a function, so you are probably looking for $('#your-modal').hide() — Nicklas Ridewing, Aug 24 '15 at 09:33
I open modal when clicking on a button. As you can see there is `bs-modal="modal"` at the end of the tag. I have tried `$('#modal').hide()`, but nothing — Marko Mladenovic, Aug 24 '15 at 10:14
I think this http://stackoverflow.com/a/25446099/4571812 might help you — Nicklas Ridewing, Aug 24 '15 at 10:40
So, maybe this could work? https://groups.google.com/forum/#!topic/twitter-bootstrap-stackoverflow/9DIvthvJIkA — Nicklas Ridewing, Aug 24 '15 at 11:38
As you probably can tell I've never worked with AngularStrap so this is just me guessing, but you should have a look at the $scope variable and it should have a way to access the close/hide function there. — Nicklas Ridewing, Aug 24 '15 at 11:43

davidkonrad · Answer 1 · 2015-10-07T18:53:50.983

$hide() does not work because you not have included the $modal service :

app.controller('modalController', function($scope, $rootScope, $modal) {
                                                               ^^^^^^

Now ng-click="$hide()" will work as expected. As the docs points out :

Append a bs-modal attribute to any element to activate the directive.

The module also exposes a $modal service Available for programmatic use (inside a directive/controller).

But you must include it in order to use it.

AngularStrap - modal doesn't hide

1 Answers1