如何在Angular中旋转文本值？

Angular全新，我可以想出100种不同的方式来完成Angular之外的这些功能，但是推动自己学习Angular方法。我的目标是，我有一个内含纯文本的元素。我想每隔x秒旋转一次文字。这里的基本HTML：如何在Angular中旋转文本值？

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

跨度是我希望文本从旋转乐趣“吸”，“真棒”，“硬”，“易”每隔x秒数。一个不错的转换也将包含在内，但是寻找使用Angular实现功能的最佳方式。我一直在寻找创建一个指令，并使用Angular的间隔，但没有得到它。

如果所有可能的值都可以包含在HTML中，那将是非常好的，但我愿意提供最佳方式的建议。

来源

2015-02-17 Ben Marshall

你试过了'NG-style'指令？ – 2015-02-17 20:16:18

我不想对类做任何事情。我正在尝试交换文本。 – 2015-02-17 20:22:46

入住这普拉克我做：

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

由于$间隔只有开始工作指定的延迟之后，我们需要将$区间之外显示数组的第一个字，就像这样：

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

因此，有必要开始索引在1 $间隔功能，不为0，通过使用（i + 1），而不是（i）中，像这样：

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

来源

2015-02-17 21:45:01 Manube

完美，谢谢！ – 2015-02-18 00:16:25

在操纵角文本是相当直接的;完成此操作的最佳方法是使用'ngModel'的控制器，我们通常称其为'ngModelCtrl'。通过创建一个自定义指令并告诉它需要一个'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); 
      } 
     }; 

    }) 
;

来源

2015-02-17 21:48:34 howardlykim

看起来不错，但是有没有办法在HTML中保留默认文本（不会被JS取代）？ – 2015-02-18 00:07:32

这将涉及利用'$ elem'对象，我不推荐它，因为它只是一个jQuery包装的DOM的轻量级版本。我以为你想要这个角度的方法，所以我给你一个你在利用'ngModel'。 – howardlykim 2015-02-18 00:50:46

如何在Angular中旋转文本值？

回答

相关问题