angleディレクティブを使用して隔離されたスコープの更新値を取得する方法は？

Question

私は、最初のページが読み込まれるときにブラウザ用にxmlをきれいにしている指示文を持っています。stringの値を得ます。動的に値を変更すると、stringは更新されません。xmlは同じままです。 xmlの更新された値を取得するために、下の指示に何が間違って実装されているのでしょうか？ディレクティブは最初のDOMに挿入されたとき

HTML

<div class="tab-pane fade" id="tab2default"><pre class="prettyprint lang-xml" xml="{{string}}"></pre></div> 

directive.js

angular.module('angularModelerApp').directive('prettyprint', function($document) { 
    return { 
    restrict: 'C', 
    scope: { 
     xml: '@' 
    }, 
    link: function postLink(scope, element, attrs) { 
     element.text(vkbeautify.xml(scope.xml, 4)); 
    } 
    }; 
}); 

Answer 1

リンク機能は、一度だけ実行されます。したがって、Angularはコード内のscope.xmlの初期値のみを取得し、更新をサブスクライブしません。詳細については

angular.module('angularModelerApp').directive('prettyprint',  function($document) { 
    return { 
    restrict: 'C', 
    scope: { 
     xml: '@' 
    }, 
    link: function postLink(scope, element, attrs) { 
     scope.$watch('xml', function(newVal, oldVal) { 
     element.text(vkbeautify.xml(newVal, 4)); 
     }); 
    } 
    }; 
}); 

がドキュメントに$時計のセクションを参照してください： https://docs.angularjs.org/api/ng/type/$rootScope.Scope