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

Answer 2

你可以写一个指令，并在链接函数中写下这样的东西：

function link(scope, element, attrs) {
    var format,
        timeoutVal;

    function updateAttrs(value) {
      element.attr('src', value));
    }

    element.on('click', function() {
      updateAttrs(value);
    });
  }

在链接中您可以使用angular $timeout。此代码段不起作用，但它可以让您对机制有所了解。另一种方法是使用ng-mouseover并在父控制器中创建一个函数，该函数将更改元素的attrs。

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

2 个答案: