CODEWITHSUNDEEP
jqueryhtmlangularjs
Selva Balaji
Selva Balaji

Reputation: 3

Not picking the script tag condition in DOM

Not picking the condition when a particular class is available in DOM. Need to enable the below script only when the availablediv class is available in DOM. But this condition is not picking even when the availablediv class is present in the DOM.

<script>

$(document).ready(function(){
if($('.availablediv').length > 0){
$('head').append('<style type="text/css">.data {
      width: 5%;
}
    .presalesDiv .callPlans h3 {
font-size: 15px !important;
}   
.handsetDiv .callPlans p {
    font-size: 14px !important;
}
.upfront ul li {
    display: block;
}</style>');

} 
});
</script>

Below is the angular ng-if condition to display a div and the condition is working fine. 

<div class="availablediv" ng-if="data.cluster_desc_count > 0">
                                        <div ng-if="data.cluster_scode">

                                            <ul>
                                                <li>{{data.clusterData}}</li>
                                                <li>{{data.clusterSpeed}}</li>
                                            </ul>
                                        </div>

</div>

Upvotes: 0

Views: 44

Answers (1)

Tan Duong
Tan Duong

Reputation: 2142

  1. Do not use angular mix with jquery. That solution will make some confusion. Because angular and jquery is different bind to DOM.

    So when document ready, maybe the div .availablediv will be not available

  2. Do not use append to head. That make your code very bad

If you want to watch element and add css, I suggest you use:

1. Use $rootScope to add class to body

scope.$watch('data.cluster_desc_count', function(value) {
       if (value > 0) {
          $rootScope.isClusterDescCount = true;
       } else {
          $rootScope.isClusterDescCount = false;
       }
    });

and use $rootScope.isClusterDescCount to add class to body.

<body ng-app="app" ng-class="{isClusterDescCount: 'is-have-cluster'}">

And your css will be

body.is-have-cluster .presalesDiv .callPlans h3 {
font-size: 15px !important;
}   
body.is-have-cluster .handsetDiv .callPlans p {
    font-size: 14px !important;
}
body.is-have-cluster .upfront ul li {
    display: block;
}

2. You can use jquery to add class to body like

scope.$watch('data.cluster_desc_count', function(value) {
   if (value > 0) {
      $('body').addClass('is-have-cluster');
   } else {
      $('body').removeClass('is-have-cluster');
   }
});
The css will be the same

Hope this help

Upvotes: 1

Related Questions