0

我正在尝试制作一个 Twitter 分享按钮指令，该指令会根据父模型进行更改

app.directive('twitterShare', function() {
  return {
    restrict: 'A',
    template: "<a href=\"https://twitter.com/share\" data-count=\"none\" class=\"twitter-share-button\" data-text=\"{{text}}\" data-lang=\"pt-BR\"></a>",
    scope: {
      text: '=twitterShare'
    },
    link: function($scope, $element, $attrs, $model) {
      return $scope.$watch('text', function(value) {
         //??
      });
    }
  };
});

和指令

<div twitter-share="scopeModel"></div>

$scope.text正确显示了 my ，$scope.scopeModel但由于 twitter 用aiframe 替换了元素，因此元素本身丢失了。我如何在它发生变化时重新创建/重绘，但应用某种限制，因为重新创建 iframe 很昂贵。

试图将其更改为

app.directive('twitterShare', function($compile, $timeout) {
return {
  restrict: 'A',
  scope: {
    text: '=twitterShare'
  },
  link: function($scope, element) {
    var $element;

    $element = "<a href=\"https://twitter.com/share\" data-count=\"none\" class=\"twitter-share-button\" data-text=\"{{text}}\" data-lang=\"pt-BR\"></a>";

    $scope.$watch('text', function(value) {
      if (value != null) {
        $timeout(function() {
          element.html($compile($element)($scope));
          typeof twttr !== "undefined" && twttr !== null ? twttr.widgets.load() : void 0;
        });
      }
    });
  }
};
});

但是第二次$watch'ed 模型更改时，{{text}}占位符不会更新。另一个奇怪的事情是，每次scopeModel更改时，$$watchers对象都会不断增加。

4

1 回答 1

1

答案是使用 $interpolate 而不是 $compile。$interpolate 使它能够处理字符串，并且不会像 $compile 那样堆叠 $$watchers，而且它在内存和 CPU 使用上也比 $compile 更容易

app.directive('twitterShare', function($interpolate, $timeout) {
    return {
      restrict: 'A',
      scope: {
        text: '=twitterShare'
      },
      replace: true,
      template: "<div ng-bind-html-unsafe='element'></div>",
      link: function($scope, element) {
        var $element;

        $element = "<a href=\"https://twitter.com/share\" data-count=\"none\" class=\"twitter-share-button\" data-text=\"{{text}}\" data-lang=\"pt-BR\"></a>";

        $scope.$watch('text', function(value) {
          if (value != null) {
            $timeout(function() {
              $scope.element = $interpolate($element)($scope);
              typeof twttr !== "undefined" && twttr !== null ? twttr.widgets.load() : void 0;
            });
          }
        });
      }
    };
  });
于 2013-05-04T12:26:35.733 回答