带有 angularjs 的 jQuery UI 对话框答案

【问题标题】：jQuery UI Dialog with angularjs带有 angularjs 的 jQuery UI 对话框
【发布时间】：2016-09-30 10:52:18
【问题描述】：

我正在尝试编写一个功能，如果我们传递范围和模板，它应该在 jQuery UI 对话框中显示给定模板，其中包含给定范围内的所有工作绑定。

代码如下：

HTML

<div id="mainDiv" ng-controller="myCtrl">
    <input type="button" value="show dialog" ng-click="showTemplateDialog()" />
</div>
<script type="text/ng-template" id="dialogTemplate">
    <div>
        This is template div.
        <span>Message: </span>
        <p>{{message}}</p>
    </div>
</script>

var app = angular.module('myApp', []).controller('myCtrl', function($scope, $compile) {
    $scope.showTemplateDialog = function() {
        alert("hi")
        var newScope = $scope.$new();
        newScope.message = "This is some message";
        $scope.showDialog(newScope, "dialogTemplate")
    };
    $scope.showDialog = function(dialogScope, template) {
        var div = $("<div style='' id='dialog' title='Test Dialog' ng-include=\"'" + template + "'\"></div>");
        $compile(div)(dialogScope);
        $("#mainDiv").append(div);
        div.dialog();
    }
})

问题是当我调用div.dialog() 时，它会在jquery-ui.min.js 中引发以下错误

Unhandled exception at line 9, column 26027 in http://localhost/TestApp/scripts/jquery-ui.min.js

0x800a138f - JavaScript runtime error: Unable to get property 'display' of undefined or null reference

请提出一些解决此错误的方法。或者建议使用 angularjs 在 jQuery 对话框中显示和 html/模板的其他方式。

【问题讨论】：

顺便说一句，您的输入元素有 HTML 语法错误。

标签： angularjs jquery-ui dialog

【解决方案1】：

我认为div 的值将是一个JQuery 对象。我会尝试将 HTML 字符串直接传递给compile()。 compile(html)(scope) 的结果是一个数组 IIRC，因此您可能希望附加其第一个元素 [0]。

编辑：我刚刚尝试过，看来 Angular 不允许以这种方式编译 ng-include。

【讨论】：

【解决方案2】：

我刚刚尝试了 Hubert 的建议，但仍然无法正常工作。然后我意识到，当我创建 div 时，它没有正确创建，并且将 html 元素的 localName 显示为 null。

然后我对我的代码进行了一些更改，并且成功了。我刚刚在我正在创建的 div 中添加了另一个 div，并将 ng-include 放在上面。

这是更新后的代码：

$scope.showDialog = function(dialogScope, template) {
        var div = $("<div id='dialog' title='Test Dialog' ><div ng-include=\"'" + template + "'\"></div></div>");    
        $compile(div)(dialogScope);
        $("#mainDiv").append(div);
        div.dialog();
}

【讨论】：