Angularjs function won't work with <div> element?

Question

I have a number of <div> tags and I'm assigning them a function that allows me to display a kind of modal with details from the <div> element by changing it's css propriety 'display' to 'block' instead of 'none'. for some reason the modal doesn't display when I click on the <div> element. but when I assign the same function to a button it does.

$scope.CountryDetailStyle = {
  'display': 'none'
};

$scope.CountryDetail = function(idCount, nameCount, descCount) {
  $scope.detailId = idCount;
  $scope.detailName = nameCount;
  $scope.detailDesc = descCount;
  $scope.CountryDetailStyle = {
    'display': 'block'
  };
  // alert('idCount : '+idCount+' nameCount : '+nameCount+' descCount : '+descCount);
}

<div id="pageContent" ng-controller="myAdminController">
  <div class="countries" ng-repeat="country in countries" title="{{country.descCount}}" ng-click="CountryDetail(country.idCount, country.nameCount,
        country.descCount)">
    <label> {{country.nameCount}} </label><br/>
    <img ng-src="uploads/{{country.image}}" alt="Image Not Found"><br>
  </div>
</div>


<div>
  <button ng-click="CountryDetail(country.idCount, country.nameCount,
        country.descCount)" style="display:block; float:right; clear:both;">Display Country Detail</button>
</div>


<div class="countryDetails" ng-style=CountryDetailStyle>
  <!--this is the modal i want to display -->
  <div class="content">
    <div class="boxHeader">
      <label>{{detailName}}</label>
    </div>
    <div class="boxContent">
      <form>
        <p>{{detailDesc}}</p>
        <a href="#" class="btn" style="text-decoration:none;">Read More</a>
      </form>
    </div>
  </div>
</div>

can someone tell me what's the problem? thanks.

Could you post a link to working code? Here for example:jsfiddle.net — user2887596
– user2887596, Commented Oct 17, 2017 at 9:39
Your div class="countryDetails" is outside the div containing the ng-controller directive. — Serge K.
– Serge K., Commented Oct 17, 2017 at 9:44
I'm using a php file to retrieve my data from server. I don't know how to upload that with the other files for it to work properly! here is the link link — I_Nesrine
– I_Nesrine, Commented Oct 17, 2017 at 9:47
@SergeK. in my script file I have to controllers and I'm using both in my html file. I'm adding the ng-controller to the <body> tag — I_Nesrine
– I_Nesrine, Commented Oct 17, 2017 at 9:52

Nicolas Gehlert · Accepted Answer · 2017-10-17 09:44:30Z

1

you should not display/hide elements based on some display: none condition. thats what ng-show (and ng-if) is for. Use a $scope variable like $scope.isModalVisible and set that to true or false.

Then you can use on your element ng-show="isModalVisible"

answered Oct 17, 2017 at 9:44

Nicolas Gehlert

3,3031 gold badge27 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

I_Nesrine Over a year ago

tried that too, still doesn't work with the <div> element. but it works fine with a <button>

Nicolas Gehlert Over a year ago

@I_Nesrine please update your example and add missing parts. it's impossible to debug if half of it is missing. A jsfiddle or sth else were you can run the code would be nice

phani indra · Accepted Answer · 2017-10-17 09:49:34Z

0

var app=angular.module("myApp",[]);
app.controller("myAdminController",["$scope",function($scope){
$scope.CountryDetailStyle = {'display': 'none'};
$scope.countries=[
{
idCount:"1",
nameCount:1,
descCount:1

},{
idCount:"2",
nameCount:2,
descCount:2

},{
idCount:"3",
nameCount:3,
descCount:3

},{
idCount:"4",
nameCount:4,
descCount:4

}
]
                                
$scope.CountryDetail = function(idCount, nameCount, descCount){
    $scope.detailId = idCount;
    $scope.detailName = nameCount;
    $scope.detailDesc = descCount;
    $scope.CountryDetailStyle = {'display': 'block'};

}
}]);

<html lang="en">

<head></head>
<body ng-controller="myAdminController" ng-app="myApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="pageContent">
        <div class="countries" ng-repeat="country in countries" title="{{country.descCount}}" ng-click="CountryDetail(country.idCount, country.nameCount,
        country.descCount)">
            <label> {{country.nameCount}} </label><br/>
   
        <button ng-click="CountryDetail(country.idCount, country.nameCount,
        country.descCount)" style="display:block; float:right; clear:both;">Display Country Detail</button>
    </div>

     <br><br>
     <div class="countryDetails" ng-style=CountryDetailStyle>
        <div class="content">
            <div class="boxHeader">
                <label>{{detailName}}</label>
            </div>
            <div class="boxContent">
                <form>
                    <p>{{detailDesc}}</p>
                    <a href="#" class="btn" style="text-decoration:none;" >Read More</a>
                </form>
            </div>
        </div>
    </div>
    </body>
    </html>

answered Oct 17, 2017 at 9:49

phani indra

2531 silver badge10 bronze badges

4 Comments

I_Nesrine Over a year ago

you placed the <button> inside the <div> element?

phani indra Over a year ago

country object will be available only in repeating container so that's why i placed button in div tag. Outside the container country object will be null

I_Nesrine Over a year ago

my objective is to display the modal when I click on the <div> element not the button. I only used the button to test if my function works.

phani indra Over a year ago

so you can add ng-click for div

I_Nesrine · Accepted Answer · 2017-10-18 14:39:06Z

0

So I found a solution, still don't know why it works but it does. I moved the </div> of the div with the id="pageContent" to just before the body closing tag. That fixed everything. Thank you guys for the help.

answered Oct 18, 2017 at 14:39

I_Nesrine

1171 gold badge1 silver badge9 bronze badges

Collectives™ on Stack Overflow

Angularjs function won't work with <div> element?

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related