jQuery UI Dialog with angularjs

Question

jQuery UI Dialog with angularjs

I am trying to write a functionality where if we pass the scope and template, it should show the given template in a jQuery UI dialog with the all working bindings from the given scope.

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

The problem is when I call div.dialog(), it throws following error in 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

Please suggest some way to resolve this error. Or suggest some other way to show and html/template in jQuery dialog using angularjs.

angularjs

jquery-ui

dialog

asked on Stack Overflow Sep 30, 2016 by

Nitin Joshi • edited Sep 30, 2016 by

Krupesh Kotecha

2 Answers

I think the value of div would be a JQuery object. I would try passing the HTML string directly to compile(). The result of compile(html)(scope) is an array IIRC, so you probably want to append its first element [0].

EDIT: I just tried that and it seems Angular won't allow ng-include being compiled this way.

answered on Stack Overflow Sep 30, 2016 by

Hubert Grzeskowiak • edited Sep 30, 2016 by

Hubert Grzeskowiak

I just tried what Hubert suggested, but still it was not working. Then I realize when I am creating the div, it's not properly getting created and was showing localName of the html element as null.

Then I did some changes in my code and it worked. I just added another div inside the div I was creating and put ng-include on that.

Here is the updated 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();
}

answered on Stack Overflow Sep 30, 2016 by

Nitin Joshi

User contributions licensed under CC BY-SA 3.0