如何使用angular指令獲取隔離范圍的更新值？

Question

我有一個指令，它在第一次頁面加載時使xml很適合瀏覽器，它獲取string值。 但是當值動態更改時， string不被更新， xml保持不變。 任何想法在以下指令中實現錯誤以獲取xml更新值是什么？

html

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

指令

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));
      });
    }
  };
});

有關更多詳細信息，請參閱文檔中有關$ watch的部分： https : //docs.angularjs.org/api/ng/type/$rootScope.Scope