Question

对Angular来说是全新的，我可以想到在Angular之外完成这个的100种不同的方法，但是我自己去学习Angular方法。我的目标是，我有一个包含纯文本的元素。我想每隔x秒旋转一次该文本。这是HTML的基础：

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

跨度是我希望文本从有趣旋转到'糟糕'，'真棒'，'硬'，'轻松'每隔x秒。还将包含一个很好的转换，但是寻找使用Angular实现功能的最佳方法。我一直在研究创建一个指令并使用Angular的间隔，但不太明白。

如果可以将所有可能的值都包含在HTML中，那将会很棒，但我愿意接受最佳方法的建议。

Answer 1

检查我做的这个插件：

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"

因此需要使用（i + 1）代替（i）来启动$ interval函数中的索引，而不是0，如下所示：

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

Answer 2

以角度操纵文本非常简单;实现此目的的最佳方法是使用“ 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); } }; }) ;

如何在Angular中旋转文本值？

2 个答案: