Как получить обновленное значение для выделенной области с помощью угловой директивы?

Question

У меня есть директива, которая делает xml красивой для браузера при загрузке первой страницы, получает значение string. но когда динамическое изменение динамически string не обновляется xml остаются такими же. Любая идея, что реализовано неправильно в директиве ниже, чтобы получить обновленное значение xml?

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

Функция линии связи выполняется только один раз, когда директива сначала вставляется в DOM. Поэтому 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