javascript Angular UI Modal、内联模板和控制器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22849061/
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, inline template and controller
提问by jonhobbs
I want to create a really simple confirmation box using UI-modal, which I have successfully used to make complicated modals that load their template and controller from external files in the past.
我想使用 UI-modal 创建一个非常简单的确认框，我已经成功地使用它来制作复杂的模态，这些模态在过去从外部文件加载它们的模板和控制器。
It's so simple though that I don't want to rely on external template and controller files, just a simple box with a close button which is somehow wired up to a controller declared directly on the modal instance.
虽然它非常简单，但我不想依赖外部模板和控制器文件，只是一个带有关闭按钮的简单框，它以某种方式连接到直接在模态实例上声明的控制器。
Here is what I have tried unsuccessfully...
这是我尝试失败的方法...
var modalInstance = $modal.open({
template: "<div>Message goes here...<button ng-click='cancel()'>Continue</button></div>",
controller: function(){
$scope.cancel = function(){
alert("Cancelled");
};
}
});
采纳答案by JeremyWeir
Looks like you need to inject $scope into your controller function
看起来您需要将 $scope 注入您的控制器功能
controller: function($scope){
controller: function($scope){
The scope of the modal template is not the same as the scope in the controller that you've defined the modal instance in.
模态模板的范围与您在其中定义模态实例的控制器中的范围不同。
The reason you're not getting undefined errors is $scope is a closure variable so adding .cancel() to it works just fine. But, since it isn't the same scope of the modal, so the ng-click doesn't see a .cancel() on its scope.
您没有收到未定义错误的原因是 $scope 是一个闭包变量，因此将 .cancel() 添加到它可以正常工作。但是，由于它与模态的范围不同，因此 ng-click 在其范围内看不到 .cancel() 。
I replicated in this jsbin: http://jsbin.com/gejuxije/1/edit
我在这个jsbin中复制了：http://jsbin.com/gejuxije/1/edit
Edit:Since you mentioned you didn't want external files for a template, here's a demo of how to define the template for the modal inside the template of the view it is used on.
编辑：既然你提到你不想要模板的外部文件，这里有一个演示，说明如何在使用它的视图的模板内为模态定义模板。
http://jsbin.com/gejuxije/2/edit
http://jsbin.com/gejuxije/2/edit
You can put html inside of an inline script...
您可以将 html 放在内联脚本中...
<script type="text/ng-template" id="myModalTemplateName.html"></script>
回答by MBielski
The value you pass to 'template' needs to be valid HTML, and ideally should contain the appropriate modal CSS classes.
您传递给 'template' 的值需要是有效的 HTML，并且理想情况下应该包含适当的模态 CSS 类。
You may also need to pass in the scope for the controller.
您可能还需要传入控制器的作用域。
var modalInstance = $modal.open({
scope:$scope,
template: "<div>Message goes here...<button ng-click='cancel()'>Continue</button></div>",
controller: function(){
$scope.cancel = function(){
alert("Cancelled");
};
}
});
In general I have not had to do this, but since you are defining the controller in the open method it may be necessary. According to the docs it should create a new scope as a child of rootScope, but I suspect your mileage is varying. I wish the instructions on the website were a little more informative on this topic.
一般来说，我不必这样做，但由于您是在 open 方法中定义控制器，因此可能有必要。根据文档，它应该创建一个新范围作为 rootScope 的子项，但我怀疑您的里程数有所不同。我希望网站上的说明能提供更多有关此主题的信息。
You may also want to try $close and $dismiss. I've never tried them, but since you are not having luck with the scope variable these might be what you need.
您可能还想尝试 $close 和 $dismiss。我从未尝试过它们，但是由于您对范围变量没有运气，这些可能正是您所需要的。
回答by Troy Wray
I am just trying to do something similar and stumbled across this. I know it's old but it might help someone.
我只是想做一些类似的事情并偶然发现了这一点。我知道它很旧，但它可能对某人有所帮助。
Simply put
简单的说
modalInstance.close();
in the cancel function
在取消功能中
