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

Question

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

我也会为此添加动画但是,以后再.....

作为AngularJS的新手,任何帮助或指示都将受到赞赏.

谢谢.

Answer 1

当一个人写这样的img标记源时:

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

图像源属性绑定到变量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