Apply jquery after rendering angularJS HTML

Question

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.

ID should not start with a number and what I see is that you set your $scope.requestpurpose to the HTML string, but are you really adding it to the DOM tree ? — ValLeNain
– ValLeNain, Commented Jan 10, 2017 at 12:51
actually i just make some changes to old project who is built by old developer so there are some blunders yeah it is adding to DOM tree its html is <div class="col-sm-12" ng-bind-html="requestpurpose"></div> — hu7sy
– hu7sy, Commented Jan 10, 2017 at 12:57

ValLeNain · Accepted Answer · 2017-01-10 15:20:46Z

1

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();
    });
}]);

edited Jan 10, 2017 at 15:20

answered Jan 10, 2017 at 13:05

ValLeNain

2,3442 gold badges23 silver badges40 bronze badges

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

6 Comments

hu7sy Over a year ago

it is added by ajax call

ValLeNain Over a year ago

why not removing the watcher and calling the showAlreadySelected function just after modifying the value of $scope.requestpurpose ?

hu7sy Over a year ago

it is asynchronous call so it will not wait for it and it will call the showAlreadySelected function first

ValLeNain Over a year ago

no if you call it just after $scope.requestpurpose = $sce.trustAsHtml(response.data.requestpurpose); it will be ok

ValLeNain Over a year ago

@hu7sy I've updated my post so you can see what I mean

|

hu7sy · Accepted Answer · 2017-01-11 04:48:32Z

0

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

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

answered Jan 11, 2017 at 4:48

hu7sy

9713 gold badges15 silver badges54 bronze badges

Collectives™ on Stack Overflow

Apply jquery after rendering angularJS HTML

2 Answers 2

6 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Related