Применить JQuery после рендеринга angularJS HTML

Question

я рендеринга HTML после AngularJS называют Ее контроллер

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

и его JQuery скрипт

<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> 

Это мой HTML

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

и после вызова ajax ниже html возникает в 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> 

, но я столкнулся проблема после угловой нагрузки его вызывающего showAlreadySelected функции, но не выбран «# 1» и одну вещи, если любое тело может помочь любой функции Jquery, которая ударит всегда, когда входной элемент с идентификатором «# 1 "," # 2 "в мой ng-bind-html div.

Answer 1

Во-первых, я бы передвинул наблюдателя за пределами then, потому что вы регистрируете нового наблюдателя каждый раз, когда вы совершаете вызов ajax.

Я пробовал, он работает, чтобы иметь номер ID (но не рекомендуется). Нам также понадобится ваш HTML-код, потому что он должен работать так, как вы это сделали. Является ли узел #1 добавленным вызовом ajax (= присутствует в $scope.requestpurpose) или он всегда присутствует в DOM?

Также вы можете добавить console.log в функцию showAlreadySelected, чтобы убедиться, что это называется.

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

Answer 2

У меня есть привязки класса с DOMSubtreeModified для обнаружения изменений в DIV

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