4

我正在尝试在我的 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 未定义”。

正如我上面提到的，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;
                }
            }
        });

问题截图如下：问题的屏幕截图

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

4

5 回答 5

5

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

请参阅我的 plunker http://plnkr.co/edit/jpJX4WvHw0SSYm3pAAzq?p=preview

所以像这样

controller: 'newTerms',

应该管用。

于 2013-09-15T07:35:51.963 回答
4

我遇到了同样的问题，模式加载主 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 路径

希望它会有所帮助，

于 2013-12-16T19:58:22.023 回答
0

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

angular.module('myApp.controllers', ['ui.bootstrap'])
于 2013-09-15T07:41:09.280 回答
0

今天我也发生了。控制器中的 templateUrl 必须与 html 文件中模式的 id 匹配。

于 2014-02-21T22:54:14.990 回答
0

您需要在其他控制器之前定义 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');
};
}
于 2015-02-09T15:50:26.757 回答