【问题标题】:AngularJS UI-Bootstrap ModalAngularJS UI-Bootstrap 模式
【发布时间】:2026-02-03 15:05:01
【问题描述】:

下面是我的 Angular 代码,我没有收到任何错误,模型打开,但 ModalInstanceCtrl 函数 cancel() 和 ok() 不想工作,但是如果我像他们在 angularjs 上一样正确地取出控制器ui-bootstrap (http://angular-ui.github.io/bootstrap/#/modal) 指示网站它似乎工作。

我使用的 HTML 与网站上的示例相同,但我已将内联模板提取到其自己的文件中,该文件正在运行。

包版本: Bootstrap 3.1.1、AngularJS 1.2.18、UI Bootstrap 0.11.0

我认为问题出在我包含控制器的地方,也许我做得不对

controller: this.ModalInstanceCtrl,

主应用 app.js:

'use strict'

angular.module('myApp', ['ui.bootstrap', myAppControllers]);

控制器 controllers.js:

'use strict';

var myApp = angular.module('myAppControllers', []);

myApp.controller('ModalCtrl', ['$scope', '$modal', '$log', function($scope, $modal, $log) {


    $scope.open = function (size) {

        var modalInstance = $modal.open({
            templateUrl: 'templates/myModalContent.html',
            controller: this.ModalInstanceCtrl,
            size: size,

           }
        });

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

myApp.controller('ModalInstanceCtrl', ['$scope', '$modalInstance', function($scope, $modalInstance) {

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

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

【问题讨论】:

    标签: javascript angularjs angular-ui-bootstrap


    【解决方案1】:

    好的,在这里找到了解决方案:

    Calling another controller within AngularJS UI Bootstrap Modal

    问题是被调用的控制器必须用单引号括起来:

    controller: 'ModalInstanceCtrl',
    

    感谢克里斯·索瑟姆

    【讨论】: