如何在 Angular 中旋转文本值？

Question

完全是 Angular 的新手，我可以想出 100 种不同的方法来在 Angular 之外完成此任务，但我会强迫自己学习 Angular 的方法。我的目标是，我有一个包含纯文本的元素。我想每 x 秒旋转一次该文本。这是基础 HTML:

<h2>Rotating text in Angular is <span>fun</span></h2>

跨度是我希望文本每隔 x 秒从有趣旋转到 'sucks'、'awesome'、'hard'、'easy' 的位置。还将包括一个很好的转换，但正在寻找使用 Angular 实现功能的最佳方法。我一直在研究创建一个指令并使用 Angular 的间隔，但不太明白。

如果所有可能的值都可以包含在 HTML 中，那就太好了，但我乐于接受有关最佳方法的建议。

Answer 1

检查我做的这个 plunk：

rotating text in angularjs

让我们定义一个单词数组：

scope.wordArr=['fun','sucks', 'awesome', 'hard', 'easy'];

指令

<span rotate-text></span>

在跨度内每秒轮换数组中的单词。

function updateWord(i) {
    var j = (i + 1) % (scope.wordArr.length); // (i + 1) to start at second word
    //so the j rotates like: 1, 2, 3, 4, 0, 1, 2,...
    element.text(scope.wordArr[j]); //changes text inside span
}

element.text(scope.wordArr[0]); // displays "fun"
stopWord = $interval(updateWord, 1000); //executes 'updateWord' every second

由于 $interval 仅在指定的延迟后才开始工作，因此我们需要在 $interval 之外显示数组的第一个字，如下所示：

element.text(scope.wordArr[0]); //displays "fun"

因此需要在 $interval 函数中使用 (i + 1) 而不是 (i) 从 1 开始索引，而不是 0，就像这样：

var j = (i + 1) % (scope.wordArr.length);

Answer 2

在 angular 中操作文本非常简单；实现此目的的最佳方法是使用我们通常称为“ngModelCtrl”的“ngModel”的控制器。通过创建一个自定义指令并告诉它需要一个 'ngModel' 指令，你可以访问这个特殊的控制器，它给你一个 API 来操纵那个 ' ngModel.'

这是 Plunker：http://plnkr.co/edit/I2HvpHn5AnnCCe8rtQOW

index.html

  <body ng-app        = "YourAppName"
        ng-controller = "YourAppCtrl">
    <h1>Hello Plunker!</h1>
    <h2>Rotating text in Angular is <span ng-model = "currentAdjective" rotate-text > {{ currentAdjective }} </span></h2>
  </body>

script.js

angular.module('YourAppName', []);

angular.module('YourAppName')
       .controller('YourAppCtrl', function($scope) {
         $scope.currentAdjective;
       })
;


angular.module('YourAppName')
       .directive('rotateText', function($interval) {
           return {
               require: 'ngModel',
               link: function($scope, $elem, $attrs, ngModelCtrl) {
                   var adjectivesToRotate = ["sucks", "hard", "awesome", "easy"];
                   var lengthOfAdjectives = adjectivesToRotate.length;
                   var randomIndex        = Math.floor(Math.random() * (lengthOfAdjectives));

                   var beginInterval = $interval(function() {                  
                     ngModelCtrl.$setViewValue(adjectivesToRotate[randomIndex]);
                     randomIndex = Math.floor(Math.random() * (lengthOfAdjectives));
                   }, 1000);
           }
       };

   })
;

如何在 Angular 中旋转文本值？

How do you rotate text values in Angular?

angularjs

angularjs-directive