jQuery UI Dialog mit angularjs

Question

Ich versuche eine Funktionalität zu schreiben, in der, wenn wir den Scope und die Vorlage übergeben, die angegebene Vorlage in einem jQuery UI Dialog mit allen funktionierenden Bindings aus dem angegebenen Bereich angezeigt werden soll.

Hier ist der Code:

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> 

JS

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

Das Problem ist, wenn ich div.dialog() nennen, wirft es in jquery-ui.min.js

01 folgende Fehler

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 

Bitte schlagen Sie eine Möglichkeit vor, um diesen Fehler zu beheben. Oder schlagen Sie eine andere Möglichkeit vor, um html/template in jQuery dialog mit angularjs anzuzeigen.

Answer 1

Ich denke, der Wert von div wäre ein JQuery-Objekt. Ich würde versuchen, die HTML-Zeichenfolge direkt an compile() übergeben. Das Ergebnis von compile (html) (scope) ist ein Array IIRC, also möchten Sie wahrscheinlich das erste Element [0] anhängen.

EDIT: Ich habe gerade versucht, und es scheint, dass Angular ng-include auf diese Weise kompiliert werden wird.

Answer 2

Ich habe gerade versucht, was Hubert vorgeschlagen, aber immer noch es hat nicht funktioniert. Dann merke ich, wenn ich das Div erstellen, es wird nicht richtig erstellt und localName des HTML-Elements als Null angezeigt.

Dann habe ich einige Änderungen in meinem Code und es hat funktioniert. Ich habe gerade ein weiteres Div in das Div eingefügt, das ich erstellt habe, und habe ng-include darauf gesetzt. Hier

ist der aktualisierte Code:

$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(); 
}