javascript - 如何制作 AngularJS 指令来更改图像的 src 属性？

Question

我想为我的图像标签创建一个 Angular Directive(指令)，将图像 src 更改为集合中的随机图像或通过调用服务。更改应在 5 秒后或作为指令的输入发生。这可能吗？有人可以帮助我开始吗？

我也会为此添加动画，但那是以后的事......

作为 AngularJS 的新手，我们将不胜感激。

谢谢。

Answer 1

当一个人像这样写一个 img 标签源时:

<img ng-src='{{imagesrc}}' />

图像源属性绑定(bind)到变量 imagesrc，然后您可以在 JS 中更改它，例如使用 $timeout:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $timeout) {
  $scope.name = 'World';
  $scope.imagesrc = "http://www.steff.qc.ca/main/wp-content/uploads/2010/03/phoenix.gif";
  $timeout(function() {
    $scope.imagesrc = "http://im2-tub-ru.yandex.net/i?id=3fb6126a9a8ea667700f698b774e34d3-90-144&n=21";
  }, 1000);
});

在这里查看完整的 plunkr: http://plnkr.co/edit/q7dI6N6skuGlhfQTqyQT?p=preview