Angular UI Modal，内联模板和控制器

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模式创建一个非常简单的确认框，我已经成功地用它来制作复杂的模态，从过去的外部文件中加载模板和控制器。

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");
        };

    }
});

3 个解决方案

#1

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

You can put html inside of an inline script...

你可以将html放在内联脚本中......

<script type="text/ng-template" id="myModalTemplateName.html"></script>

#2

The value you pass to 'template' needs to be valid HTML, and ideally should contain the appropriate modal CSS classes.

传递给“模板”的值需要是有效的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。我从来没有尝试过它们，但由于你没有运行范围变量，这些可能就是你所需要的。

#3

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

在取消功能中

#1