AngularJS UI Bootstrap解雇（）不能工作

让我开始说，我是非常新的角。我试图设置一个工作正常的模态UI。但是当我点击界面上的“取消”按钮时没有任何反应。AngularJS UI Bootstrap解雇（）不能工作

这是我的代码：

(function() { 
     var domainName = 'TournamentCategory'; 
     angular.module('tournamentCategories').controller("CategoriesController", 
     ['$scope', '$modal', 'guidGenerator', 'eventBus', domainName + "Service",      
     'TournamentCategoryModelFactory', 
     function ($scope, $modal, guidGenerator, eventBus, domainService, modelFactory) 
     {$scope.openTournamentTree = function() { 


     var modalInstance = $modal.open({ 
      templateUrl: 'TournamentTreeModal.html', 
      controller: 'TreeController', 
      size: 'wide-90', 
      resolve: { 

      } 
     }); 

     modalInstance.result.then(function (selectedItem) { 
      //$scope.selected = selectedItem; 
     }, function() { 
      //$log.info('Modal dismissed at: ' + new Date()); 
     }); 
     }; 

     $scope.ok = function() { 
     modalInstance.close(); 
     } 

     $scope.cancel = function() { 
     modalInstance.dismiss('cancel'); 
     }; 
     }]); 
    })();

的HTML：

<script type="text/ng-template" id="TournamentTreeModal.html"> 
<div class="modal-header"> 
</div> 
<div class="modal-body"> 
    <div class="include-tree" ng-include="'tournament-tree.html'"></div> 
</div> 
<div class="modal-footer"> 
    <button class="btn btn-primary" ng-click="ok()">GEM</button> 
    <button ng-click="cancel()" class="btn btn-warning" type="button" data-dismiss="modal">LUK, uden at gemme</button> 
</div>

这是我的 “treeController”

angular.module('tournamentTree').controller("TreeController", ['$scope', 'guidGenerator', function ($scope, guidGenerator) { 
$scope.allMatches = []; 
$scope.finalMatch = [createNewMatch()]; 
$scope.tierCount = 1; 
$scope.previousMatchTier = 0; 

$scope.deletePreviousMatches = function (parentMatch) { 
    for (var i in parentMatch.previousMatches) { 
     var previousMatch = parentMatch.previousMatches[i]; 
     _.remove($scope.allMatches, function (match) { return match.id == previousMatch.id }); 
    } 
    parentMatch.previousMatches = []; 
} 


$scope.addMatches = function (thisMatch) { 
    if (thisMatch && !thisMatch.previousMatches) 
     thisMatch.previousMatches = []; 
    if (thisMatch && thisMatch.previousMatches.length == 0) { 
     thisMatch.previousMatches.push(createNewMatch(thisMatch)); 
     thisMatch.previousMatches.push(createNewMatch(thisMatch)); 
    } 
} 

$scope.addMatchTier = function() { 
     for (var i in $scope.allMatches) { 
      var match = $scope.allMatches[i]; 
      if (match.previousMatches.length == 0) { 
       $scope.addMatches(match); 
      } 

     } 
     $scope.tierCount++; 
} 

$scope.previousMatchTier = function() { 
    for (var i in $scope.allMatches) { 
     var previous; 
     if (previous.allMatches.length == i) { 
      previous = $scope.allMatches[i] - $scope.allMatches[i - 1]; 
     } 
    } 
} 

$scope.removeMatchTier = function() { 
    //if (confirm('Er du sikker på, at du vil slette det yderste niveau af turneringstræet?')) { 
    var matchesToDelete = []; 
    for (var i in $scope.allMatches) { 
     var match = $scope.allMatches[i]; 
     if (match.previousMatches.length == 0) { 
      matchesToDelete.push(match.nextMatch); 
      //$scope.deletePreviousMatches(match.nextMatch); 
     } 
    } 

    for (var i in matchesToDelete) { 
     $scope.deletePreviousMatches(matchesToDelete[i]); 
    } 
    $scope.tierCount--; 
    //} 
} 

$scope.hasPreviousMatches = function (match) { 
    return match && match.previousMatches && match.previousMatches.length > 0; 
} 

$scope.moveWinnerToNextMatch = function (match, winnerName) { 
    match.nextMatch.setPlayerName(match.id, winnerName); 
} 

function createNewMatch(nextMatch) { 
    var newMatch = {}; 
    newMatch.tier = nextMatch && nextMatch.tier ? nextMatch.tier + 1 : 1; 
    newMatch.id = guidGenerator.newGuid(); 
    newMatch.player1 = ""; 
    newMatch.player2 = ""; 
    newMatch.nextMatch = nextMatch; 
    newMatch.previousMatches = []; 
    newMatch.setPlayerName = function(matchId, playerName) { 
     for (var i in newMatch.previousMatches) 
     { 
      if (newMatch.previousMatches[i].id == matchId) 
      { 
       if (i == 0) 
        newMatch.player1 = playerName; 
       else 
        newMatch.player2 = playerName; 
      } 
     } 
    } 

    $scope.allMatches.push(newMatch); 
    return newMatch; 
} 
}]);

来源

2014-10-30 Casper Nybroe

为例$解雇已经在模态范围可用，因此在模板raplace取消（）与$ dimiss（）http://angular-ui.github.io/bootstrap/#/modal

来源

2014-10-30 20:22:39 mayank

谢谢您的回复！我用“$ dismiss（）”替换HTML中的“cancel（）”。它没有工作。你粘贴的链接显示404错误？ – 2014-10-30 20:30:49

http://angular-ui.github.io/bootstrap然后转到模态文档。你使用哪个版本？要修复只需添加范围：$范围到模态打开选项对象...请参阅范围选项的文档默认是rootscope – mayank 2014-10-30 20:43:46

嗨，Mayank。我用我的TreeController的代码更新了我的帖子。我试图将“scope：$ scope”添加到打开的对象 - 但没有运气。我使用Visual Studio，如何检查我正在使用的版本？ – 2014-10-30 21:08:26

需要在你的情态动词去控制器'TreeContro缪勒”

angular.module('tournamentCategories').controller('TreeController', function($scope, $modalInstance) { 

    $scope.ok = function() { 
    modalInstance.close(); 
    } 

    $scope.cancel = function() { 
    modalInstance.dismiss('cancel'); 
    }; 
});

我在这plunker

来源

2014-10-30 20:05:05 Dylan

喜，迪伦。谢谢您的回复。当你说“在你的模态控制器”中时，你能详细说明把这个放在哪里吗？它应该放在我的TreeController.js中吗？ – 2014-10-30 20:35:05

AngularJS UI Bootstrap解雇（）不能工作

回答

相关问题