Как связать данные двумя способами в AngularJS с помощью директивы - PullRequest
Новая
       5

Как связать данные двумя способами в AngularJS с помощью директивы

0 голосов
/ 01 октября 2018

Я хочу знать, как связать аттрибут в двух направлениях.У меня есть директива 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);
    }
  }

})();
...