Question

我有一个简单的角度模态，用角度ui.bootstrap唤起。它打开很好，传递值等，但不会关闭或取消。我认为这是$ scopes谈论的问题。我知道每个模态都有自己的$ scope，我只是不确定如何让它们互相交谈。

这是模态的标记：

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

尝试两种方式，但都不起作用......

这是控制器“打开”模态：

.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.";
                  }]
              });
          };
    }])

现在.. $ scope.close会进入仪表板控制器还是仍然试图坐在自己的控制器中，如图here所示？

Answer 1

关闭功能需要在控制器中。

$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.";
              }]
          });
      };

Answer 2

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

应该是

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

您必须将点击处理程序绑定到关闭按钮

角度模态不会关闭（使范围说话）

2 个答案: