Question

我之前创建了一个非常简单的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，然后对应一个设置font-size的css类（class =“cloud_'+ wordSize +'”）

function populateKeywordCloud(wordCount, selector) {
    for (i = 0; i < wordCount ; i++) {
        wordSize = Math.floor((Math.random() * 10) + 1);
        $(selector + ' #keyword_cloud .dataBoxContent').append('<span class="cloud_' + wordSize + '" title="Keyword wordSize ' + wordSize + ' times" ">' + word_list[i] + '</span> ');
    }
}

云以下列方式初始化：

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

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

我是否创建了一个自定义指令并创建了一个链接函数，我可以在其中执行所有wordcloud逻辑。在templateUrl：下调用的模板文件然后使用ng-repeat

获取wordcloud数据并填充云。

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

Answer 1

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

如果您觉得它需要一个控制器，请尝试将其打包到具有相应指令的模块中。保持可重复使用。

Answer 2

在角度方面，你应该忘记选择器。相反，想想控制器元素。例如，由于您的标签云是动态的，因此应将其包装为控制器。

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

这是模板。请注意ngRepeat指令，该指令允许您迭代$scope tagCloudCtrl的属性。在这里，我们直接使用{{...}}来评估单词的大小和文本。

代码大小，我们填写此words范围变量：

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

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

查看我的working example on plnkr。

请注意，正如提到的risto，您可以使用指令从应用程序的其余部分完全抽象标记云。一旦您对常规控制器感到轻松，请查看AngularJS's

指令

享受您的AngularJS之旅！

在Angularjs中创建一个词云生成器

2 个答案: