Erstellen Sie eine Angularjs-Anweisung, um jquery Tagcanvas-Plugin

Question

Wrap Ich möchte eine animierte Wortwolke implementieren. Da ich keine eckigen oder ionischen Ready-Plugins gefunden habe, um das zu tun, was ich wollte, entschied ich (und ich fand es interessant zu lernen), einen eckigen Wrapper für einen jQuery-Code zu erstellen. Das Plugin ist tagcanvas, und das Anwendungsbeispiel ist this

Was ich bisher getan haben:

• Ich habe Datei meiner index.html
• die jQuery js ich eine js-Datei erstellt, wo ich meine Richtlinie erklärt und hinzugefügt, um es zu index.html:

tagcanvas.js

Wie Sie im Codepenbeispiel sehen können, gibt es Attribute, die ich aufrufen muss, und eine HTML-Element-ID canvas, von der ich nicht wusste, wie ich sie in meiner Direktive aufrufen soll.

Mein zweites Problem ist, dass ich nicht weiß, wie ich die Wörter erstellen und aufrufen, die ich in meiner Tag Cloud anzeigen möchte. Ich habe mir viele Tutorials angesehen, aber ich weiß immer noch nicht, wie ich das machen soll. Jede Hilfe wird geschätzt.

Answer 1

Zuerst würde ich Ihre Angular App und Direktive nicht mit dem gleichen Namen benennen. Es ist nicht nur verwirrend, aber es funktioniert möglicherweise nicht richtig. Zweitens, obwohl es viele Möglichkeiten, kann dies zu nähern, ist hier, wie ich es tun würde:

Richtlinie
(Ich habe die Richtlinie auf ein Attribut eher als ein Element geändert und verwendet ein Isolat Rahmen für die Attribute . die Link-Funktion ist in einem $timeout umwickelt das Element besteht in dem DOM vor dem Versuch, tagcanvas zu nennen.)

.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); 
      }); 
     } 
    }; 
}) 

Controller
(Sie mögen Ihr Wort wahrscheinlich bekommen würden, um sicherzustellen, Liste von einem Dienst oder einem anderen Speicher, aber zur Veranschaulichung habe ich ein Array in der Steuerung)

.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" 
     } 
    ]; 
}) 

html

<div> 
    <canvas width="300" 
      height="300" 
      id="myCanvas" 
      tag-canvas 
      canvas-id="tags" 
      outline-colour="#ff00ff" 
      text-font="Arial" 
      text-colour="#ff00ff" 
      reverse="true" 
      depth="0.8" 
      max-speed="0.05" 
      weight-mode="both" 
      weight="true"></canvas> 
</div> 
<div id="tags" style="font-size: 50%;"> 
    <a ng-repeat="word in wordList" href="{{word.href}}" style="font-size: {{word.fontSize}}">{{word.text}}</a> 
</div> 

Answer 2

Ich habe ein Beispiel Plunker mit einem Arbeitsbeispiel gemacht fest einprogrammiert, wo Sie kann dynamisch neue Tags hinzufügen: http://plnkr.co/edit/zR4pxcZlqPxr8pnhsNRI?p=preview

Es ist nicht so einfach, innerhalb einer AngularJS-Direktive tagcanvas zu verwenden. Tagcanvas ist stark von einer bestimmten DOM-Darstellung abhängig. Dies kann manchmal im Widerspruch zu der Funktionsweise von AngularJS stehen. Aus diesem Grund musste ich beispielsweise den Dienst $timeout verwenden.

Es wäre besser, eine "Komponente" aus Ihrer Tagcanvas-Direktive zu machen, die selbst für ihr HTML verantwortlich ist.

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); 
    } 
    }; 

});