在Angularjs中创建wordcloud生成器

我之前创建了一个非常简单的Wordcloud生成器，现在我想按照最佳实践以angularjs的方式移植它

这是我之前在jquery项目中所做的：

我有一个包含文本选择项的变量：

var text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit........Suspendisse fermentum venenatis tincidunt.";

然后，我将文本变量拆分为一个单词数组

var word_list = text.split(/\W+/);

下面是我填充云的地方。我使用Math.random随机分配单词的大小，然后它对应于设置字体大小的css类（class=“cloud”+wordSize+”）

所以我的问题是，我将如何以angularjs的方式做到这一点

我是否创建了一个自定义指令并创建了一个链接函数，在这里我执行了所有wordcloud逻辑。然后，在templateUrl:下调用的模板文件将获取wordcloud数据并使用ng repeat填充云

---

或者我是否创建了一个指令，从负责生成该指令使用的数据的wordcloud控制器中提取关键字数据

我认为最好尽可能多地封装逻辑，所以如果可以的话，创建一个包含所有逻辑的指令

---

如果你觉得它需要一个控制器，试着把它打包成一个带有相应指令的模块。保持它的可重用性。

在angular中，您应该忘记选择器。相反，考虑控制器元素。例如，由于标记云是动态的，所以应该将其包装为控制器

<div id="keyword_cloud" ng-controller="tagCloudCtrl">
  <div class="dataBoxContent">
    <span ng-repeat="word in words" class="cloud_{{ word.size }}" title="Keyword wordSize {{ word.size }} times">{{ word.text }}</span>
  </div>
</div>

此外，不要忘记分离逻辑：正如您所看到的，我创建了一个单独的服务来获取标签和存储字数。这将使你的应用程序非常动态、灵活和可重用

看看我的

请注意，正如risto所提到的，您可以使用指令从应用程序的其余部分完全抽象标记云。一旦您可以轻松地使用常规控制器，请访问

---

祝你旅途愉快

谢谢你的建议。我想我会在整个过程中使用指令。这里似乎不需要控制器，我认为最好的做法是避免再使用jQuery，并设法将服务逻辑与控制器分开。请稍等，直到我提供一个更完整的答案。谢谢，我将等待答案：）谢谢你展示了如何在不需要使用jquery选择器的情况下构造我的逻辑。我想我会把你的答案和Risto的答案结合起来，创建一个指令，这样我也可以在我的其他项目中轻松地重用这个wordcloud生成器。

$(document).ready(function () { 
    populateKeywordCloud(30, '.summary_page');
}

<div id="keyword_cloud" ng-controller="tagCloudCtrl">
  <div class="dataBoxContent">
    <span ng-repeat="word in words" class="cloud_{{ word.size }}" title="Keyword wordSize {{ word.size }} times">{{ word.text }}</span>
  </div>
</div>

angular.module('tagcloud-app', [])
  .value('WORD_COUNT', 3)
  .service('tagService', function() {
    // Fetch your words here
    return {
      getTags: function() {
        return ['aaaaa', 'bBbb', 'CCC', 'dd'];
      }
    };
  })
  .controller('tagCloudCtrl', ['$scope', 'tagService', 'WORD_COUNT',
    function($scope, tagService, WORD_COUNT) {
      var wordSize, word_list = tagService.getTags();

      // This will make the "words" array visible from associated template
      $scope.words = [];

      for (var i = 0; i < WORD_COUNT; i += 1) {
        $scope.words.push({
          text: word_list[i],
          size: Math.floor((Math.random() * 10) + 1)
        });
      }
    }
  ]);