twitter-bootstrap AngularJS UI Bootstrap 关闭（）不起作用

AngularJS UI Bootstrap dismiss() won′t work

提问by Casper Nybroe

Let me start by saying that I am very new to angular. I have tried to setup a modal ui which works fine. But when I click the "cancel" button on the interface nothing happens.

首先让我说我对 angular 很陌生。我试图设置一个工作正常的模态用户界面。但是当我点击界面上的“取消”按钮时，什么也没有发生。

This is my code:

这是我的代码：

    (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');
        };
        }]);
    })();

The HTML:

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>

This is my "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;
}
}]);

回答by mayank

$dismiss is already available on modal scope so in template raplace cancel() with $dimiss() http://angular-ui.github.io/bootstrap/#/modal

$dismiss 已经在模态范围内可用，所以在模板 raplace cancel() 和 $dimiss() http://angular-ui.github.io/bootstrap/#/modal

回答by Dylan

That needs to go in your modals controller 'TreeController'

这需要进入你的模态控制器“TreeController”

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

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

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

I have an example in this plunker

我在这个plunker 中有一个例子