創建一個angularjs指令來包裝jquery tagcanvas插件

我想實現一個動畫文字雲。由於我沒有找到任何角度或離子準備插件來做我想做的事情，我決定（並且我發現它很有趣）來爲jquery代碼創建一個角度包裝。這個插件是tagcanvas和使用的例子是this 創建一個angularjs指令來包裝jquery tagcanvas插件

我迄今所做的：

我加入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，我不知道如何在我的指令中調用它們。

我的第二個問題是我不知道如何創建和調用我想在我的標籤雲中顯示的詞。我看了很多教程，但我仍然不知道如何去做。任何幫助將不勝感激。

來源

2016-04-21 Hana

首先，我不會將您的Angular應用程序和指令命名爲相同的名稱。這不僅令人困惑，而且可能無法正常工作。其次，儘管可能有很多方法可以解決這個，這裏是我會怎麼做：

指令
（我已經改變了指令屬性而不是一個元素，使用的分離範圍的屬性該鏈接功能被包裹在一個$timeout，以確保該元素在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); 
      }); 
     } 
    }; 
})

控制器
（你可能會希望得到您的字從服務或一些其他的存儲列表，但爲了說明我已經硬編碼在控制器的陣列）

.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>

來源

2016-04-21 15:53:15 Lex

我有一個錯誤，說「tagcanvas」功能不是一個函數，但我確信添加jquery.tagcanvas。js和tagcanvas.js：/ – Hana

您必須錯誤地引用了某些內容。這是一個[工作Plunker]（http://plnkr.co/edit/4DR5FjttC2CP0KkDcwaW?p=preview）與我的答案確切的代碼。 – Lex

我對控制器有問題。我不明白在哪裏宣佈它。因爲我有一個名爲starter.Clients的模塊，其中有一個名爲clientsController的控制器，它是我想要使用tagCloud（clients.html）的地方。那麼我是否需要調用'ctrl'控制器而不是您在clientsController中創建的？：/我很困惑。 – Hana

我已經作出一個例子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); 
    } 
    }; 

});

來源

2016-04-22 13:01:21 DanEEStar

創建一個angularjs指令來包裝jquery tagcanvas插件

回答

相關問題