如何使用角度指令獲取隔離範圍的更新值？

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