Angular-ui 模态问题

Question

我正在尝试在我的 Web 应用程序中包含一个 angular-ui 模式，但在设置所有内容时遇到了问题。

文档表明您可以使用 $modalInstance 将子控制器注入父控制器，但我不太明白如何去做。

这是当前代码（直接来自文档中的模态演示）：

angular.module('myApp.controllers', []).
controller('addContent', function ($scope, $http, $modal, $log){

    //modaltest
    $scope.items = ['item1', 'item2', 'item3'];

    $scope.addTerm = function () {  
        var newTerm = $modal.open({
            templateUrl: 'newTermModal.jade',
            controller: newTerms,
            resolve: {
                items: function () {
                    return $scope.items;
                }
            }
        });

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

}).
controller("newTerms",function($scope, $modalInstance, items){

    $scope.items = items;
    $scope.selected = {
        item: $scope.items[0]
    };

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

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

});

当我像现在一样运行应用程序并单击按钮打开模式（addTerm 函数）时，应用程序崩溃并出现错误“ReferenceError: newTerms is not defined”。

正如我上面提到的，angular-ui 网站表明您可以使用 $modalInstance 注入控制器，但我无法弄清楚如何。 一种 任何帮助将不胜感激！

编辑

按照 Chandermani 的建议在路径名上添加引号后，似乎模式正在加载当前页面而不是指定的模板。

我已将路径更改为以下内容：templateUrl:

    $scope.addTerm = function () {  
        var newTerm = $modal.open({
            templateUrl: './views/partials/newTermModal.jade',
            controller: 'newTerms',
            resolve: {
                items: function () {
                    return $scope.items;
                }
            }
        });

问题截图如下：

知道是什么原因造成的吗？

Answer 1

您需要在其他控制器之前定义 newTerms 控制器。或者您可以更改代码并在主控制器中创建一个名为 newTerms 的函数，并删除模态中控制器名称的引号。

$scope.addTerm = function () {  
    var newTerm = $modal.open({
        templateUrl: './views/partials/newTermModal.jade',
        controller: newTerms,
        resolve: {
            items: function () {
                return $scope.items;
            }
        }
    });

var newTerms = function($scope, $modalInstance, items){
$scope.items = items;
$scope.selected = {
    item: $scope.items[0]
};

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

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

Answer 2

今天也发生在我身上。控制器中的 templateUrl 必须与 html 文件中 modal 的 id 匹配。

Answer 3

我遇到了同样的问题，模态加载主 HTML 文件但不加载模板。

我之前的配置是：

打开对话框，但对话框内容是主要的 HTML（就像你的图片一样）

$scope.opts = {
            backdrop: true,
            backdropClick: true,
            dialogFade: false,
            keyboard: true,
            templateUrl : 'app/reports/modalContent.html',
            controller : 'ModalInstanceCtrl',
            resolve: {}
        };

按预期工作

$scope.opts = {
            backdrop: true,
            backdropClick: true,
            dialogFade: false,
            keyboard: true,
            templateUrl : '/app/reports/modalContent.html',
            controller : 'ModalInstanceCtrl',
            resolve: {}
        };

听起来如果你输入错误templateUrl，它默认使用主页 HTML。

确保您有正确的 templateUrl 路径

希望对你有帮助，

Answer 4

您是否尝试过声明'ui.bootstrap' 模块的依赖关系？像这样：

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

Answer 5

您可以将控制器作为字符串值传递。我采用了模态的默认演示示例并将其更改为传递控制器名称而不是控制器本身。

见我的笨蛋http://plnkr.co/edit/jpJX4WvHw0SSYm3pAAzq?p=preview

像这样的

controller: 'newTerms',

应该可以。