CODEWITHSUNDEEP
angularjs
hu7sy
hu7sy

Reputation: 971

Apply jquery after rendering angularJS HTML

i have rendering HTML after AngularJS call Its controller is 

App.controller('controller', ['$scope', '$http', '$sce', '$routeParams', '$location', function ($scope, $http, $sce, $routeParams, $location) {       
    $http({
        //http call
    }).then(function (response) {
        $scope.requestpurpose = $sce.trustAsHtml(response.data.requestpurpose);

    $scope.$watch('requestpurpose', function(newValue, oldValue) {
      if(typeof newValue != 'undefined'){
        alert(newValue);
        showAlreadySelected();
      }
    });
}]);

and its jquery script is 

<script type="text/javascript">
    // it will show the div depending on purpose of request
    function showAlreadySelected(){
        if ($("#1").is(":checked")) {
            $("#veterinarian-info").show();
        } else {
            $("#veterinarian-info").hide();
        }
    }
</script>

This is my HTML

<div class="row purpose-box" >
  <div class="col-sm-12"  ng-bind-html="requestpurpose"></div>
</div>

and after ajax call below html is renering in ng-bind-html

<div class="boxes-check">
    <div class="box-one">
        <input checked="checked" rev="Annual exam" type = "checkbox" name = "request_purpose[]" ng-model=formData.request_purpose[1] onChange="angular.element(this).scope().changePurpose(this)" value = "1" class = "md-check" id = "1" >
    </div>
    <div class="box-two">
        <label title="" for="1">
            <span></span>
            <span class="check"></span> 
            <span class="box"></span> Annual exam 
        </label>
    </div>
</div>
<div class="boxes-check">
    <div class="box-one">
        <input checked="checked" rev="Spay or neuter surgery" type = "checkbox" name = "request_purpose[]" ng-model=formData.request_purpose[2] onChange="angular.element(this).scope().changePurpose(this)" value = "2" class = "md-check" id = "2" >
    </div>
    <div class="box-two"> 
        <label title="" for="2">
            <span></span>
            <span class="check"></span>
            <span class="box"></span> Spay or neuter surgery 
        </label>
    </div>
</div>

but i am facing problem is after angular load its calling showAlreadySelected function but does not selected "#1" and one thing if any body can help is any Jquery function which will hit whenever input element with id "#1", "#2" render into my ng-bind-html div.

Upvotes: 0

Views: 81

Answers (2)

hu7sy
hu7sy

Reputation: 971

I have bind class with DOMSubtreeModified to detect changes within a div

$('.purpose-box').bind("DOMSubtreeModified",function(){
      showAlreadySelected();
 });

Upvotes: 0

ValLeNain
ValLeNain

Reputation: 2314

First, I would move the watcher outside the then because you're registering a new watcher everytime you make the ajax call.

I tried, it works to have a number as ID (but not recommended though). We'll need your HTML code as well cause it should work the way you've implemented. Is the #1 node added by the ajax call ( = present in $scope.requestpurpose) or is it always present in the DOM ?

Also, can you add a console.log in the showAlreadySelected function to be sure it's called.

EDIT

App.controller('controller', ['$scope', '$http', '$sce', '$routeParams', '$location', function ($scope, $http, $sce, $routeParams, $location) {       
    $http({
        //http call
    }).then(function (response) {
        $scope.requestpurpose = $sce.trustAsHtml(response.data.requestpurpose);
        showAlreadySelected();
    });
}]);

Upvotes: 1

Related Questions