javascript - Angular UI 模态、内联模板和 Controller

Question

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

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

这是我尝试失败的方法...

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 注入(inject)到你的 Controller 函数中

Controller :函数($scope){

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

您没有收到未定义错误的原因是 $scope 是一个闭包变量，因此向其添加 .cancel() 就可以正常工作。但是，由于它与模态的范围不同，因此 ng-click 在其范围内看不到 .cancel()。

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

编辑:既然你提到你不想要模板的外部文件，这里有一个演示如何在使用它的 View 模板内定义模态模板。

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

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

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