paul_h paul_h - 4 months ago 21
AngularJS Question

Getting ng-show to work with Html5 <dialog> elements

Html5 dialogs are simple. Shoulda been there 15 years ago!

How to get ng-show working (it doesn't) with dialogs?

<!DOCTYPE html>
<html ng-app="project">
<head>
<meta charset='UTF-8'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
<script>
angular.module('project', [])
.controller('TheController', function ($scope) {
$scope.dialogShowing = false;
$scope.showDialog = function () {
dialogShowing = true;
document.getElementById('theDialog').show();
};
$scope.hideDialog = function () {
dialogShowing = false;
document.getElementById('theDialog').close();
};
});
</script>
</head>
<body ng-controller="TheController">
<div> Hello
<!-- dialog, where it is placed in the source, doesn't take up space -->
<dialog id="theDialog">
<div>
<h3>Simple Angular Html5Dialog</h3>
<hr/>
<p>I am very well, thank you</p>
<button ng-click="hideDialog()">No, thank you</button>
</div>
</dialog>
how are you?
</div>
<button ng-click="showDialog()">^ Click for the answer</button>
</body>
</html>


The only thing I have been able to get working is .open() and .close() on the dialog widget itself, and have to simulate ng-show/hide, above.

Advice?

Answer

It's perfectly possible. Here's a demo from my blog:

<div style="width: 600px;" id="example">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <script type="text/javascript">
        var App = angular.module("MyApp", []);

        // Make ng-show/hide doesn't work with <dialog>
        App.controller('DialogDemo', ['$scope', function ($scope) {
            $scope.dialogShowing = false;
            $scope.showDialog = function () {
                $scope.dialogShowing = true;
                $scope.whatHappened = "something happened that needs a dialog";
                document.getElementById('theDialog').showModal();
            };
            $scope.hideDialog = function () {
                $scope.dialogShowing = false;
                document.getElementById('theDialog').close();
                $scope.whatHappened = undefined;
            };
        }]);
    </script>
    <div style="align-content: center" ng-app="MyApp" ng-controller="DialogDemo">
        (text above button)<br/>
        <button ng-click="showDialog()">Click me</button><br/>
        (text below button, and above dialog in source)<br/>
        <dialog id="theDialog">
            <div>
                <h3>Ooops</h3>
                <hr/>
                <div>
                    <!-- see note above about double-curly-brace -->
                    {{whatHappened}}
                </div>
                <hr/>
                <button ng-click="hideDialog()">OK</button>
            </div>
        </dialog>
        (text below dialog in source)<br/>
        <span style="font-weight: bold" ng-show="dialogShowing">Dialog should now be show (modal style) in the center of the page.</span>
    </div>
</div>