jQuery UI dialog with angularj

Question

スコープとテンプレートを渡すと、指定されたスコープのすべての作業バインディングを含む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> 

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

私はdiv.dialog()を呼び出すときに問題がある、それはjquery-ui.min.js

01で次のエラーがスローされますが、

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 

このエラーを解決する方法を提案してください。あるいは、anglejsを使ってjQueryダイアログでhtml/templateを表示する他の方法を提案してください。

Answer 1

divの値はJQueryオブジェクトになると思います。 HTML文字列を直接compile()に渡してみます。コンパイル（html）（スコープ）の結果は配列IIRCなので、おそらく最初の要素[0]を追加したいと思うでしょう。

編集：私はちょうどそれを試みたとAngularはこのようにコンパイルされているng-includeを許可しません。

Answer 2

私はちょうどヒューバートが提案したことを試しましたが、それでも動作しませんでした。それからdivを作成しているときに正しく作成されず、html要素のlocalNameがnullとして表示されていました。

次に、私のコードにいくつかの変更を加え、それがうまくいった。私は作成していたdivの中に別のdivを追加して、その上にng-includeを入れました。ところで、あなたが入力要素でHTML構文エラーを持っている

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