CODEWITHSUNDEEP
javascriptangularjs
Varvara Jones
Varvara Jones

Reputation: 791

Angular modal won't close (making $scopes talk)

I have a simple angular modal that's evoked with angular ui.bootstrap. It opens just fine, passes values, etc, but WILL NOT CLOSE OR CANCEL. I assume it's the $scopes talking issue. I know that each modal has their own $scope, I'm just not sure how to make them talk between each other.

Here's the markup for the modal:

<div>{{entry}}</div>
<button class="btn btn-primary">{{ $modalInstance.close() }}Close</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>

Trying both ways but neither works...

And here's the controller that "opens" the modal:

.controller('dashboard',['$scope', '$rootScope', '$location', '$modal', 'loginService', function($scope, $rootScope, $location, $modal, loginService){

          var allowed = loginService.authenticate();

          allowed.get(
              function(result){
                  console.log(result);
                  if (result.loggedin !== undefined && result.loggedin === true) {
                      console.log("Welcome!");
                  }
              },
              function(result) {
                  $location.path("admin");
                  $rootScope.errorVisible = true;
              }
          );

          $scope.open = function () {

              var modalInstance = $modal.open({
                  templateUrl: '/partials/submission_mod.html',
                  controller: ['$scope', '$modalInstance', function($scope, $modalInstance){
                      $scope.modalInstance = $modalInstance;
                      $scope.entry = "Submission info goes here.";
                  }]
              });
          };
    }])

Now.. Would the $scope.close go into the dashboard controller or still try to sit in its own controller as shown here ?

Upvotes: 0

Views: 90

Answers (2)

Dave Jones
Dave Jones

Reputation: 344

The close function needs to be in the controller.

$scope.open = function () {

          var modalInstance = $modal.open({
              templateUrl: '/partials/submission_mod.html',
              controller: ['$scope', '$modalInstance', function($scope, $modalInstance){      
                  $scope.close = function () {
                       $modalInstance.dismiss('cancel');
                  };    

                  $scope.modalInstance = $modalInstance;
                  $scope.entry = "Submission info goes here.";
              }]
          });
      };

Upvotes: 2

mohamedrias
mohamedrias

Reputation: 18576

<button class="btn btn-primary">{{ $modalInstance.close() }}Close</button>

Should be

<button class="btn btn-primary" ng-click="modalInstance.close()">Close</button>

You must bind the click handler to the close button

Upvotes: 1

Related Questions