Переменная Scope не работает в HTML-шаблоне в angularjs

Question

Я пытаюсь передать variation variable от card.html до tooltip.html в ангулайсе.Однако по тем или иным причинам это не работает.Когда я console.log(scope.variation) внутри interestRateTooltip.directive.js, он показывает мне apr.

Кроме того, в tooltip.html, если у меня есть следующее

<div>
  {{ variation }}
</div>

, оно отображает apr внутри div.Поэтому я не понимаю, почему <i tooltip position="{{ variation === 'apr' ? 'left' : 'right'}}"> всегда будет ложным и становится right.

Я провел 6 часов в поисках с утра.Может кто-нибудь, пожалуйста, помогите?Спасибо!

В card.html

<div>
  <interest-rate-tooltip variation="apr"></interest-rate-tooltip>
</div>

В interestRateTooltip.directive.js

angular.module("borrower.offers").directive('interestRateTooltip',  function () {
  return {
    restrict: "E",
    templateUrl: ".../card.html",
    link: function(scope, element, attrs) {
      if (attrs.variation === 'apr') {
        scope.variation = 'apr';
      }
    }
  }
});

В tooltip.html

<div>
  <i tooltip position="{{ variation === 'apr' ? 'left' : 'right'}}">
</div>

В tooltip.directive.js

angular.module("borrower.offers")
  .directive("tooltip", function() {
    return {
      restrict: "A",
      link: function(scope, element, attrs) {

        var params = {};

        switch (attrs.position) {
          case 'left':
            params = { position: 'bottom left' }
            break;
          case 'right':
            params = { position: 'bottom right' }
            break;
          case 'center':
            params = { position: 'bottom center' }
            break;
        }
      }
    }
  });

Answer 1

Возможно, ваша проблема в том, что вы обращаетесь к attrs.position внутри функции ссылки для директивы.Поскольку функция ссылки срабатывает только один раз, во время ее запуска ваш attrs.position равен right, поскольку variation, вероятно, не определен.Вы можете добавить $timeout к вашей директиве и обернуть содержимое функции ссылки внутри нее, вызывая дайджест.

Это будет примерно так:

.directive("tooltip", ['$timeout', function($timeout) {
return {
  restrict: "A",
  link: function(scope, element, attrs) {

    $timeout(function() {
        var params = {};

      switch (attrs.position) {
        case 'left':
          params = { position: 'bottom left' }
          break;
        case 'right':
          params = { position: 'bottom right' }
          break;
        case 'center':
          params = { position: 'bottom center' }
          break;
      }
    });
   }
  }
}]);

Это, вероятно, будетрешить вашу проблему, но также кто-то может подумать о лучшем решении.