Question

首先让我说我对角度很新。我试图设置一个工作正常的模态ui。但是当我点击＆＃34;取消＆＃34;界面上的按钮没有任何反应。

这是我的代码：

    (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>

这是我的＆＃34; treeController＆＃34;

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

Answer 1

$ dismiss已经可用于模态范围，因此在模板raplace cancel（）中使用$ dimiss（）http://angular-ui.github.io/bootstrap/#/modal

Answer 2

需要进入你的模态控制器＆＃39; TreeController＆＃39;

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

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

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

我在这个plunker

中有一个例子

AngularJS UI Bootstrap dismiss（）不起作用

2 个答案: