Question

我想实现一个动画词云。由于我没有找到任何角度或离子就绪插件来做我想要的，我决定（并且我发现学习它很有趣）为jquery代码创建一个角度包装器。该插件为tagcanvas，用法示例为this

到目前为止我做了什么：

我将jquery js文件添加到我的index.html
我创建了一个js文件，我在其中声明了我的指令，并将其添加到index.html：

tagcanvas.js

angular.module('tagCanvas', [])

.directive('tagCanvas', function() {

return {

  restrict: 'E',
  link: function (scope, element, attrs) {


        element.tagcanvas({


            outlineColour: attrs.outlineColour,
            reverse: attrs.reverse,
            depth: attrs.depth,
            maxSpeed: attrs.maxSpeed,
            textFont: attrs.textFont,
            textColour: attrs.textColour,
            weightMode: attrs.weightMode,
            weight: attrs.weight
        }, attrs.canvas);



  }
};

});

正如你在codepen示例中看到的那样，我需要调用一些属性，以及一个html元素id canvas，我不知道如何在我的指令中调用它们。

我的第二个问题是我不知道如何创建和调用我想要在我的标签云中显示的单词。我看了很多教程，但我还是不知道该怎么做。任何帮助将不胜感激。

Answer 1

首先，我不会将您的Angular应用和指令命名为同名。它不仅令人困惑，而且可能无法正常工作。其次，虽然可能有很多方法可以解决这个问题，但我会这样做：

<强>指令
（我已将指令更改为属性而不是元素，并使用了属性的隔离范围。链接函数包含在$timeout中，以确保在尝试调用{{1}之前元素存在于DOM中}}。）

tagcanvas

<强>控制器
（您可能希望从服务或其他存储中获取单词列表，但为了说明，我在控制器中硬编码了一个数组）

.directive("tagCanvas", function($timeout) {
    return {
        restrict: "A",
        scope: {
            canvasId: "@",
            outlineColour: "@",
            reverse: "@",
            depth: "@",
            maxSpeed: "@",
            textFont: "@",
            textColour: "@",
            weightMode: "@",
            weight: "@"
        },
        link: function (scope, element) {
            $timeout(function() {
                element.tagcanvas({
                    outlineColour: scope.outlineColour,
                    reverse: scope.reverse,
                    depth: scope.depth,
                    maxSpeed: scope.maxSpeed,
                    textFont: scope.textFont,
                    weightMode: scope.weightMode,
                    weight: scope.weight
                }, scope.canvasId);
            });
        }
    };
})

<强> HTML

.controller("ctrl", function ($scope) {
    $scope.wordList = [
        {
            href: "#",
            fontSize: "2.83ex",
            text: "1000"
        }, {
            href: "#",
            fontSize: "4.8ex",
            text: "example"
        }, {
            href: "#",
            fontSize: "8.77ex",
            text: "gif"
        }, {
            href: "#",
            fontSize: "2.83ex",
            text: "svg"
        }, {
            href: "#",
            fontSize: "8.77ex",
            text: "jpg"
        }, {
            href: "#",
            fontSize: "10.68ex",
            text: "png"
        }, {
            href: "#",
            fontSize: "2.83ex",
            text: "bmp"
        }, {
            href: "#",
            fontSize: "4.8ex",
            text: "img"
        }
    ];
})

Answer 2

我已经创建了一个示例plunker，其中包含一个可以动态添加新标记的工作示例： http://plnkr.co/edit/zR4pxcZlqPxr8pnhsNRI?p=preview

在AngularJS指令中使用tagcanvas并不容易。 Tagcanvas严重依赖于某种DOM表示。这有时与AngularJS的工作方式不一致。因此，我必须使用$timeout服务。

最好从tagcanvas指令中创建一个“组件”，该指令本身负责其HTML。

app.directive('tagCanvas', function($timeout) {

  return {
    scope: {
      tagData: '='
    },
    controllerAs: 'vm',
    template: '<canvas width=300 height=300" id="my-canvas"></canvas>' +
    '<div id="tags"><a ng-repeat="tag in tagData" ng-bind="tag.name"></a></div>',
    restrict: 'E',
    link: function(scope, element, attrs) {
        element.find('canvas').tagcanvas({
          outlineColour: '#ff00ff',
          reverse: true,
          depth: 0.8,
          maxSpeed: 0.05,
          textFont: null,
          textColour: null,
          weightMode: 'both',
          weight: true
        }, 'tags');

        scope.$watch('tagData', function(newValue) {
          $timeout(function() {
            element.find('canvas').tagcanvas('reload');
          }, 0);
        }, true);
    }
  };

});

创建一个angularjs指令来包装jquery tagcanvas插件

2 个答案: