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

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>