Let's make our directive more flexible by allowing the developer to pass in a color as the value. First, I'll rename the directive to vcolor, and then I'll pass in a new color, let's say blue, as the value. Right now, our output is still purple. That's because we need to utilize the value passed in in the directive's definition.
We can access this value on the binding provided as the second argument. But unfortunately now we have a black color again. That's because we've provided blue down here as a JavaScript expression. So it's actually looking for reactive data called blue, which doesn't exist.
So what we should do is pass this as a string instead. Perfect. Now I could reuse my directive with different values as much as I'd like. Pretty cool.
But to be honest, this really isn't that useful. We could do the exact same thing just by styling the element with regular old CSS. Let's make things a little bit more interesting. Let's say that we want to be able to pass in multiple colors to our directive, and then switch out between those colors to make a kind of flashing effect.
I'll start by providing an array of colors to our color directive. To support this in the directive's definition, I'll save the value in a variable called colors. Then, at an interval of 500 milliseconds, I'll switch through each of the colors one by one. And we'll need a variable to keep up with what the current color is.
I'll call that i. And then we can target the current color. Next, we'll need to increase i at each turn of the interval so that the color rotates. Finally, if i is equal to the length of the colors array, we'll set it back to 1 so that the loop starts back over again.
Now, on the right hand side, you can see our flashy ViewSchool text cycle through blue, red, and green. Let's make our directive more flexible by allowing the developer to pass in a color as the value. First, I'll rename the directive to vcolor, and then I'll pass in a new color, let's say blue, as the value. Right now, our output is still purple.
That's because we need to utilize the value passed in in the directive's definition. We can access this value on the binding provided as the second argument. But unfortunately now we have a black color again. That's because we've provided blue down here as a JavaScript expression.
So it's actually looking for reactive data called blue, which doesn't exist. So what we should do is pass this as a string instead. Perfect. Now I could reuse my directive with different values as much as I'd like.
Pretty cool. But to be honest, this really isn't that useful. We could do the exact same thing just by styling the element with regular old CSS. Let's make things a little bit more interesting.
Let's say that we want to be able to pass in multiple colors to our directive, and then switch out between those colors to make a kind of flashing effect. I'll start by providing an array of colors to our color directive. To support this in the directive's definition, I'll save the value in a variable called colors. Then, at an interval of 500 milliseconds, I'll switch through each of the colors one by one.
And we'll need a variable to keep up with what the current color is. I'll call that i. And then we can target the current color. Next, we'll need to increase i at each turn of the interval so that the color rotates.
Finally, if i is equal to the length of the colors array, we'll set it back to 1 so that the loop starts back over again. Now, on the right hand side, you can see our flashy ViewSchool text cycle through blue, red, and green.