2017-01-10 5 views
0

私がレンダリングしているHTMLをレンダリング後のjQueryを適用しますこれは私のHTMLですはangularJS HTML

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

htmlの下のajax呼び出しが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」と一つのことを選択しない「IDでいつでも入力要素にヒットする任意のjQueryの関数である#1 "、"#2 "がng-bind-html divにレンダリングされます。

+0

ID番号と私は見て始めるべきではないのdiv内の変化を検出するDOMSubtreeModifiedとバインドクラスを持っていますscope.requestpurpose'をHTML文字列に追加しますが、実際にDOMツリーに追加していますか? – ValLeNain

+0

実際に私はちょうど古い開発者によって構築されている古いプロジェクトにいくつかの変更を加えるので、いくつかの事実がDOMツリーに追加されています。

hu7sy

答えて

1

最初に、私はあなたがajax呼び出しを行うたびに新しいウォッチャーを登録しているので、ウォッチャーをthenの外に移動します。

私は試してみましたが、IDとして番号を持つように動作します(ただし、お勧めできません)。あなたのHTMLコードは、実装した方法で動作する必要があります。 #1ノードはajaxコール(= $scope.requestpurpose)に追加されていますか、それとも常にDOMに存在していますか?

また、showAlreadySelected関数にconsole.logを追加して、それが呼び出されていることを確認できますか?

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

これはajaxコール – hu7sy

+0

によって追加されますなぜウォッチャーを削除せずに 'showAlreadySelected '' $ scope.requestpurpose'の値を変更した直後に機能しますか? – ValLeNain

+0

これは非同期呼び出しなので、それを待たずに、まずshowAlreadySelected関数を呼び出します – hu7sy

0

あなたは `$を設定することで、私は

$('.purpose-box').bind("DOMSubtreeModified",function(){ 
     showAlreadySelected(); 
}); 
関連する問題