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未定义”。

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

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

看我的plunker http://plnkr.co/edit/jpJX4WvHw0SSYm3pAAzq?p=preview

所以这样的事情

controller: 'newTerms',

应该管用。

Answer 2

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

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

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

Answer 4

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

Answer 5

您需要在其他控制器之前定义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');
};
}