javascript Angular-ui 模态问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18808672/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular-ui modal issue
提问by bornytm
I'm trying to include an angular-ui modal in my web application but am having issues with getting everything set up.
我正在尝试在我的 Web 应用程序中包含一个 angular-ui 模式，但在设置所有内容时遇到问题。
The documentation indicate that you can use $modalInstance to inject the child controller into the parent controller but I don't quite understand how to go about doing so.
文档表明您可以使用 $modalInstance 将子控制器注入父控制器，但我不太明白如何去做。
Here is the current code (it is straight from the modal demo from the documentation):
这是当前代码（直接来自文档中的模态演示）：
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');
};
});
When I run the app like it is now and click the button to open the modal (addTerm function) the app crashes with the error "ReferenceError: newTerms is not defined."
当我像现在一样运行应用程序并单击按钮打开模态（addTerm 函数）时，应用程序崩溃并显示错误“ReferenceError: newTerms is not defined”。
As I mentioned above, the angular-ui site indicates you can inject a controller with $modalInstance but I have not been able to figure out how. a Any help would be greatly appreciated!
正如我上面提到的，angular-ui 站点表明您可以使用 $modalInstance 注入控制器，但我一直无法弄清楚如何。任何帮助将不胜感激！
EDIT
编辑
After adding the quotation marks on the pathname as suggested by Chandermani, it seems the modal is loading in the current page rather than the specified template.
按照 Chandermani 的建议在路径名上添加引号后，模式似乎正在当前页面而不是指定的模板中加载。
I've changed the path to the following: templateUrl:
我已将路径更改为以下内容：templateUrl：
$scope.addTerm = function () {
var newTerm = $modal.open({
templateUrl: './views/partials/newTermModal.jade',
controller: 'newTerms',
resolve: {
items: function () {
return $scope.items;
}
}
});
A screenshot of the issue follows:
问题截图如下：
Any idea what could be causing this?
知道是什么原因造成的吗？
回答by Chandermani
Well you can pass the controller as a string value. I took the default demo sample for modal and changed it to pass controller name instead of controller itself.
那么您可以将控制器作为字符串值传递。我采用了模态的默认演示示例并将其更改为传递控制器名称而不是控制器本身。
See my plunker http://plnkr.co/edit/jpJX4WvHw0SSYm3pAAzq?p=preview
查看我的 plunker http://plnkr.co/edit/jpJX4WvHw0SSYm3pAAzq?p=preview
So something like this
所以像这样
controller: 'newTerms',
controller: 'newTerms',
should work.
应该管用。
回答by Maxim Shoustin
I got the same problem, the modal loads main HTML file but not template.
我遇到了同样的问题，模态加载主 HTML 文件而不是模板。
My previous configuration was:
我之前的配置是：
opens dialogs but dialog content is main HTML(like on your pic)
打开对话框，但对话框内容是主要的 HTML（就像你的照片一样）
$scope.opts = {
backdrop: true,
backdropClick: true,
dialogFade: false,
keyboard: true,
templateUrl : 'app/reports/modalContent.html',
controller : 'ModalInstanceCtrl',
resolve: {}
};
works as expected
按预期工作
$scope.opts = {
backdrop: true,
backdropClick: true,
dialogFade: false,
keyboard: true,
templateUrl : '/app/reports/modalContent.html',
controller : 'ModalInstanceCtrl',
resolve: {}
};
Sounds like if you put wrong templateUrl, it by default uses main page HTML.
听起来如果你放错了templateUrl，它默认使用主页 HTML。
Be sure that you have right path for templateUrl
确保你有正确的 templateUrl 路径
Hope it will help,
希望它会有所帮助，
回答by manonthemat
Happened to me today, too. The templateUrl in the controller must match the id for the modal in the html file.
今天也发生在我身上。控制器中的 templateUrl 必须与 html 文件中模态的 id 匹配。
回答by willver
You need to define the newTerms controller before your other controller. Or you can change the code and just create a function inside your main controller with the name newTerms and remove the quotation marks for the name of your controller in your modal.
您需要在其他控制器之前定义 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');
};
}
回答by hzm
Have you tried to declare a dependency of 'ui.bootstrap'module? Like this:
您是否尝试过声明'ui.bootstrap'模块的依赖项？像这样：
angular.module('myApp.controllers', ['ui.bootstrap'])
