Javascript 角度用户界面模式、内联模板和控制器

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

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

以下是我尝试过但没有成功的

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

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

    }
});

var modalInstance=$modal.open({
模板：“消息到此…继续”，
控制器：函数（）{
$scope.cancel=函数（）{
警报（“取消”）；
};
}
});

传递给“模板”的值必须是有效的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");
        };
    }
});

var modalInstance=$modal.open({
范围：$scope，
模板：“消息到此…继续”，
控制器：函数（）{
$scope.cancel=函数（）{
警报（“取消”）；
};
}
});

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

---

您可能还需要尝试$close和$Disclose。我从未尝试过它们，但由于您在scope变量方面运气不佳，这些可能就是您所需要的。

看起来您需要将$scope注入到控制器函数中

控制器：函数（$scope）{

模态模板的作用域与您在中定义模态实例的控制器中的作用域不同

没有出现未定义错误的原因是$scope是一个闭包变量，因此向其添加.cancel（）效果很好。但是，由于它与模式的作用域不同，因此ng click在其作用域上看不到.cancel（）

我在这个jsbin中复制了：

编辑： 由于您提到不希望模板使用外部文件，因此这里演示了如何在视图的模板中为模式定义模板

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

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

---

我只是想做一些类似的事情，但无意中发现了这个。我知道它很旧，但它可能会帮助别人

简而言之

modalInstance.close(); 

---

在cancel函数中

对不起，我去掉了一些HTML来简化它。我现在将它包装在一个div中。不确定您的第二点，当我使用外部HTML文件作为模板时，我的HTML中不必有任何特殊类，因为AngularUI将它包装在它自己的模板中。当我提供静态模板时，我将整个事情包装起来在一组具有模态类的div中：modalouter、modal header、modal body和/或modal footer。我知道文档没有说要这样做，但他们也没有说不要这样做。我的结果每次都是优秀的、可行的模态。虽然我的模态显示非常好，但只是取消按钮不起作用se它似乎没有连接到控制器中的取消功能。抱歉，不确定你的意思。将作用域传递给控制器？作用域上会有什么？非常全面的答案。谢谢。我希望我可以对此进行十几次升级。我发现的所有其他模态示例都使您看起来必须创建自定义控制器对于每种模式。很高兴显示您可以在线执行此操作。