Question

我正在尝试将angulajs中的variation variable从card.html传递到tooltip.html。但是，无论出于何种原因，它都不起作用。当我在console.log(scope.variation)内interestRateTooltip.directive.js时，它向我显示apr。

此外，如果我有以下内容，请在tooltip.html中

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

它在div中显示apr。因此，我不明白为什么<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;
      }
    });
   }
  }
}]);

这可能会解决您的问题，但也有人会想到更好的解决方案。

作用域变量在angularjs的html模板中不起作用

1 个答案: