Click here to Skip to main content
14,635,816 members
Rate this:
Please Sign up or sign in to vote.
See more:
When i click a button a div is shown and what i want to do is when i click outside it anywhere in window wants to hide it.

I cannot use JQuery . Must find a way to do in angular. Thought of writing a custom directive ..

Any suggestions ??

I found this site Site

but since am new to Angular am not fully getting the idea

Updated 12-Aug-14 2:07am
Rate this:
Please Sign up or sign in to vote.

Solution 1

here is sample of hide and show div

i have create two div
on button click i have show one div and hide 2nd div

on windows mouseout event hide div
also mouseout on div hide the div itself

<title> New Document

function show(id)
document.getElementById("dv").style.visibility = "visible";

document.getElementById("dv1").style.visibility = "hidden";

function hide(id) {
document.getElementById(id).style.visibility = "hidden";
document.getElementById("dv1").style.visibility = "visible";



Arjun Menon U.K 12-Aug-14 9:06am
Hi Yasir,

Thanks for the reply . I am not allowed to use JavaScript/JQuery only Angular ... :(
Rate this:
Please Sign up or sign in to vote.

Solution 2

Use this code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
    <script type="text/javascript" src=""></script>
    <script type="text/javascript">
        var flgIsHide = false;
        function controller1($scope) {
            $scope.items = [{ id: 1, name: "Item-1", imgurl: "", isSelected: false },
            { id: 2, name: "Item-2", imgurl: "", isSelected: false },
            { id: 3, name: "Item-3", imgurl: "", isSelected: false },
            { id: 4, name: "Item-4", imgurl: "", isSelected: false}];

            $scope.selectedItemImage = "#";

            $scope.selectItem = function (id, url) {
                flgIsHide = false;
                $scope.selectedItemImage = url;
                $scope.items.forEach(function (item) {
                    if ( == id)
                        item.isSelected = true;
                        item.isSelected = false;

            $scope.safeApply = function (fn) {
                var phase = this.$root.$$phase;
                if (phase == '$apply' || phase == '$digest') {
                    if (fn && (typeof (fn) === 'function')) {
                } else {

        window.onclick = function () {
            if (flgIsHide) {
                var scope = angular.element(document.getElementById('controller1')).scope();
                scope.safeApply(function () {
                    scope.items.forEach(function (item) {
                        item.isSelected = false;
                    scope.selectedItemImage = "#";
                flgIsHide = true;
<body ng-app>
    <div id="controller1" ng-controller="controller1">
            List Of Items</div>
        <table style="border-collapse: collapse;" border="1">
                <td style="vertical-align: top;">
                        <tr ng-repeat="item in items">
                            <td ng-style="{'background-color': item.isSelected==false?'Red':'green'}">
                                <button ng-click="selectItem(,item.imgurl)">
                    <div ng-show="selectedItemImage!='#'">
                        <img id="imgItem" ng-src="{{selectedItemImage}}" style="height: 300px; width: 300px;" />

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100