AngularJS動的HTMLを再コンパイルするときに古い$ウォッチャーを削除する

Question

私はいくつかのページを構築する必要のあるXMLのために、ページを動的にビルドする（サーバーからXMLを取得し、そのXML構築ページまたはフォームを読む）すべてが互いに関連しており、「次へ」、「前の」ボタンを使用してネガティブにすることができます。

は

<div> 
    <form name="myController.mainForm" novalidate> 
     <div my-dynamic="myController.dynamicHtml"></div> 
    </form> 
</div> 

herer myDynamicが生成されたHTMLを扱っている、ディレクティブで、私たちのようなものを持っていることを実現するために、我々は別のページに移動する必要があるときに我々は、そのページのための新しいHTMLを生成し、myController.dynamicHtmlに割り当て私は、入力コントロールの数を持っている各ページで今

link: function postLink(scope, element, attrs) { 
    scope.$watch(attrs.myDynamic, function (html) { 
     element.html(html); 
     $compile(element.contents())(scope); 
    }); 
} 

と、私はこのような何かを持っているという指令で

、 （またはディレクティブ）であり、それぞれにはバインディングが少なく、ウォッチャー数が増えます。

もし私が否定が、別のページにナビゲートすると、前のページのウォッチャーは破壊されず、my-dynamicディレクティブがスコープから削除されるまで気付くはずです。

私は、HTMLを再度コンパイルするときに、前のページの時計が破壊されるようにするために必要なことは何ですか。

Answer 1

$compileサービスは、スコープに何かをリンクするたびに、ウォッチャーを追加します。そのため、ng-repeat,ng-switch,ng-view,ng-include、ng-ifなどのディレクティブはすべて新しい子スコープを作成します。それらはコンパイルされたDOMを破壊するときに子スコープにリンクし、そのスコープを破棄します。 scope.$newとscope.$destroyを使用してください。

link: function postLink(scope, element, attrs) { 
    var newScope; 
    scope.$watch(attrs.myDynamic, function (html) { 
     if (newScope) { 
      newScope.$destroy(); 
     }; 
     element.empty(); 
     if (html) { 
      element.html(html); 
      newScope = scope.$new() 
      $compile(element.contents())(newScope); 
     }; 
    }); 
} 

これは、変更時に子スコープを作成して破棄します。

Answer 2

あなたは時計に変数を割り当てることによって何かをunwatchことができます。

var dynamicWatcher = scope.$watch(attrs.myDynamic, function (html) { 
    element.html(html); 
    $compile(element.contents())(scope); 

    dynamicWatcher(); // unwatch 
}); 

は、戻り値の型でthe documentation参照してください：

戻り 機能（）
をこのリスナーの登録解除機能を返します。 。