Question

我想使用UI模式创建一个非常简单的确认框，我已经成功地使用它来制作过去从外部文件加载模板和控制器的复杂模态。

虽然我不想依赖外部模板和控制器文件这么简单，只是一个带有关闭按钮的简单框，它以某种方式连接到模态实例上直接声明的控制器。

这是我尝试过的失败......

var modalInstance = $modal.open({
    template: "<div>Message goes here...<button ng-click='cancel()'>Continue</button></div>",
    controller: function(){

        $scope.cancel = function(){
            alert("Cancelled");
        };

    }
});

Answer 1

看起来你需要在控制器函数中注入$ scope

controller: function($scope){

模态模板的范围与您在其中定义模态实例的控制器中的范围不同。

你没有得到未定义错误的原因是$ scope是一个闭包变量，所以添加.cancel（）就可以了。但是，由于它与模态的范围不同，因此ng-click在其范围内看不到.cancel（）。

我在这个jsbin中复制了：http://jsbin.com/gejuxije/1/edit

修改既然你提到你不想要一个模板的外部文件，这里有一个演示如何为它所使用的视图模板内的模态定义模板。

http://jsbin.com/gejuxije/2/edit

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

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

Answer 2

传递给“模板”的值需要是有效的HTML，理想情况下应该包含适当的模态CSS类。

您可能还需要传入控制器的范围。

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

一般情况下，我没有必要这样做，但由于您在open方法中定义控制器，因此可能是必要的。根据文档，它应该创建一个新的范围作为rootScope的孩子，但我怀疑你的里程是变化的。我希望网站上的说明在这个主题上提供更多信息。

您可能还想尝试$ close和$ dismiss。我从未尝试过它们，但由于你没有运行范围变量，这些可能就是你所需要的。

Answer 3

我只是想做类似的事情并偶然发现。我知道它已经过时了但可能对某人有所帮助。

简单地说

modalInstance.close();

取消功能

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

3 个答案: