jQuery UI對話與angularjs

我想寫一個功能，如果我們通過作用域和模板，它應該顯示在給定範圍內的所有工作綁定的jQuery UI對話框中給定的模板。jQuery UI對話與angularjs

下面是代碼：

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

請建議一些方法來解決此錯誤。或者建議一些其他方式在jQuery對話框中使用angularjs顯示和html /模板。

來源

2016-09-30 Nitin Joshi

順便說一句，你在輸入元素的HTML語法錯誤。 –

我認爲div的值是一個JQuery對象。我會嘗試將HTML字符串直接傳遞給compile()。編譯（html）（範圍）的結果是一個數組IIRC，所以你可能想追加它的第一個元素[0]。

編輯：我只是試過，看來Angular不會允許ng-include這樣編譯。

來源

2016-09-30 11:05:00

我剛剛嘗試了Hubert建議的，但仍然不起作用。然後我意識到當我創建div時，它沒有正確創建，並且顯示html元素的localName爲空。

然後我在代碼中做了一些改變，它工作。我只是在我創建的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(); 
}

來源

2016-09-30 13:36:26

jQuery UI對話與angularjs

回答

相關問題