在AngularJS中寻找一种更好的循环方式，一次显示一个元素

我正在建立一个应用程序，其中有动画，我需要它更好地工作。我希望能够以指定的动画间隔浏览一系列div，并一次显示一个div。我希望每个系列都有自己的速度和div

以下是我目前掌握的内容（也抄录如下）：

基本上，我正在寻找一种方法，将setInterval放在animatedBox的属性上，这样我就可以使用自定义属性创建一个新的animatedBox。但每次我尝试这样做，它都会破裂

HTML

JAVASCRIPT

函数构建框（）{
返回{
颜色：“#”+（Math.random（）*0xFFFFFF你是对的，我相信这里的指令是正确的解决方案。（顺便说一下，这是一个有趣的解决方案。）

当遇到这样的问题时，我通常从编写HTML和控制器开始，如果一切都正常的话，我希望我能编写它们



app.value（'randomColor'，function（）{
var red=Math.floor（Math.random（）*255）；
var green=Math.floor（Math.random（）*255）；
var blue=Math.floor（Math.random（）*255）；
返回“rgb”（“+红色+”、“+绿色+”、“+蓝色+”）；
});
app.controller（'BoxController'，函数（$scope，randomColor）{
$scope.colors=[randomColor（），randomColor（）]；
});

在这里，控制器只负责设置作用域上的一些基本数据——颜色数组；DOM非常简单，只需将该数组传递给名为
动画框
的对象，而randomColor
已被移动到服务中，以便可以更容易地重用和测试。（我也对它做了一些修改，这样就不会产生错误的十六进制值。）

现在，唯一不起作用的部分是称为
动画框的东西

我们将定义我们的指令，注入
$timeout
服务，因为我们知道我们想要做基于计时器的事情。指令的结果将只是一个对象

app.directive（'animatedbox'，函数（$timeout）{
返回{
};
});

由于我们希望指令是自包含的，并且不会弄乱它所包含的外部作用域，因此我们将为它提供一个隔离作用域（有关更多信息，请参阅，但基本上这只是意味着我们有一个作用域，除了通过我们指定的变量之外，它没有附加到指令所在的作用域。）

由于我们希望通过HTML属性访问传递给指令的值，因此我们将在该值上设置一个双向作用域绑定；我们将其称为
colors

app.directive（'animatedbox'，函数（$timeout）{
返回{
范围：{
颜色：'=动画框'
}
};
});

我们将为它提供一个简单的模板，该模板循环使用
颜色
，并为每种颜色输出一个
div
。我们的
ng show
表明，只有当选择的范围值
等于
$index
时，才应显示
div
，这是
ng当前迭代的数组索引-重复循环

app.directive（'animatedbox'，函数（$timeout）{
返回{
范围：{
颜色：'=动画框'
},
模板：“”+
""
};
});

现在来看link函数——处理指令逻辑的函数。首先，我们要跟踪显示的框；在我们的
ng show
中，我们使用了
selected
。我们还想跟踪有多少个框；我们将在指令的范围内使用
$watch
，以跟上这一点

链接：功能（范围、元素、属性）{
scope.selected=0；
var计数=0；
范围$watch（'颜色'），功能（值）{
//每当数组中的'colors'的值
//传递到指令中的颜色、更改、更新
//我们内部的颜色计数
如果（值）计数=value.length；
else count=0；//如果'colors'为falsy，则将count设置为0
}，true）；//`true`确保我们监视数组中的值，
//不仅仅是对象引用
}

最后，我们需要经常遍历每个框。我们将使用
$timeout
，这是
setTimeout
的一个版本，其中包括一个scope
$apply
调用（它会做一些其他事情，但我们现在不关心这个）

var nextBox=function（）{
如果（scope.selected>=count-1）scope.selected=0；
else范围。选定++；
//递归使用“$timeout”而不是“setInterval”`
$timeout（nextBox，500）；
};
//启动第一个“nextBox”启动指令`
nextBox（）；

如果将整个指令放在一起，最终将得到以下代码（注释已删除）：

app.directive（'animatedbox'，函数（$timeout）{
返回{
范围：{
颜色：'=动画框'
},
模板：“”+
"",
链接：功能（范围、要素、属性）{
scope.selected=0；
var计数=0；
范围$watch（'颜色'），功能（值）{
如果（值）计数=value.length；
else计数=0；
}，对）；
var nextBox=函数（）{
如果（scope.selected>=count-1）scope.selected=0；
else范围。选定++；
$timeout（nextBox，500）；
};
nextBox（）；
}
};
});

一个完整的工作示例，包括注释和一个小的调试区域，您可以在这里看到
颜色的值，并与之交互（因此您可以看到指令如何响应控制器中的更改）：

既然你已经有了这一点，试着应用这个知识来允许指令通过一个可变的速度。