如何使用指令在AngularJS中以两种方式绑定数据

Question

我想知道如何在两个方向上绑定属性。我有一个svg指令，我想将该指令绑定到我的html属性，以在某些条件下更改svg。

HTML：

<svg-sprite icon="fy-times" ng-model="icon" class="fy-icon icon icon-checkmark" ng-attr-icon="{{vm.passwordRequirement.hasCharacterLimit ? 'fy-check' : 'fy-times'}}"></svg-sprite>

指令：

;(function () {
  /**
  * @desc svg sprite diretive to generate SVG element by using icon id 
  * @example <svg-sprite class="fy" icon="fy-google-circle"></svg-sprite>
  */
  angular
    .module('Components')
    .directive('svgSprite', svgSprite);

  function svgSprite() {
    var directive = {
      link: link,
      template: '<svg><use xlink:href=""></use></svg>',
      replace: 'true',
      restrict: 'E',
      scope: {}
    };

    return directive;

    function link(scope, element, attrs) {
      var icon = document.getElementById(attrs.icon);
      var viewBox = '0 0 16 16'; // Defaulting view box

      // If SVG has loaded then get viewBox of the icon
      if (icon) {
        viewBox = icon.getAttribute('viewBox');
      }

      element.attr('viewBox', viewBox);
      element.children().attr('xlink:href', '#' + attrs.icon);
    }
  }

})();