打开和关闭一次后，Bootstrap / Angular模态不再起作用

Question

我有一个页面打开一个模式，要求用户在对页面上的内容进行编辑时进行确认。如果用户在模态中选择“取消”按钮，则模态关闭正常，但随后拒绝使用相同的链接重新打开。如果再次单击模态链接，则会引发以下错误：

TypeError: fn is not a function
at $parseFunctionCall (https://localhost:44310/js/angular.js:12346:15)
at ngEventDirectives.(anonymous function).compile.element.on.callback (https://localhost:44310/js/angular.js:21438:17)
at Scope.$get.Scope.$eval (https://localhost:44310/js/angular.js:14401:28)
at Scope.$get.Scope.$apply (https://localhost:44310/js/angular.js:14500:23)
at HTMLAnchorElement.<anonymous> (https://localhost:44310/js/angular.js:21443:23)
at HTMLAnchorElement.n.event.dispatch (https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js:3:6466)
at HTMLAnchorElement.n.event.add.r.handle (https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js:3:3241)

这是模态的控制器，非常简单：

(function (angular, undefined) {
"use strict";

angular
    .module("app.edit")
    .controller("App.EditController", [
        "$modalInstance", "$scope", "editList",
        function ($modalInstance, $scope, editList) {
            $scope.thingsToEdit = editList;
            $scope.ok = function () {
                $modalInstance.close();
            };
            $scope.cancel = function () {
                $modalInstance.dismiss("cancel");
            };
        }
    ]);
})(angular);

editList用于在确认模式（页面的html）中显示列表。

模态的HTML是：

<div class="modal-header">
    <h3>Edit</h3>       
</div>

<div class="modal-body">
    <p>Please confirm the following edits: </p>
    <ul>
        <li ng-repeat="thing in thingsToEdit">{{thing}}</li>
    </ul>
</div>

<div class="modal-footer">
    <div class="form">
        <div class="form-group">
            <button class="btn btn-primary" type="submit" ng-click="ok()">Confirm Edit</button>
            <button class="btn btn-danger" ng-click="cancel()">Cancel</button>
        </div>
    </div>
</div>

在打开模态的原始页面的JavaScript中是：

$scope.edit = function (things) {
    $scope.editList = things;
    $scope.thingsToEdit = things;

    var editModal = $modal.open({
        animation: true,
        templateUrl: "edit.html",
        controller: "App.EditController",
        resolve: {
            editList: function () {
                return $scope.thingsToEdit;
            }
        }
    });

    editModal.result.then(function () {
        var editUrl = //a valid url
        $http.post(editUrl, { cache: true })
             .success(function () {
                 console.log("edit successful");
             })
             .error(function () {
                 console.log("edit failed");
             })
    }, function() {
        console.log("edit canceled");
    });
};