Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/420.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何生成AngularJS指令来更改图像的src属性?_Javascript_Angularjs_Angularjs Directive - Fatal编程技术网

Javascript 如何生成AngularJS指令来更改图像的src属性?

Javascript 如何生成AngularJS指令来更改图像的src属性?,javascript,angularjs,angularjs-directive,Javascript,Angularjs,Angularjs Directive,我想为我的图像标签创建一个角度指令,将图像src更改为集合中的随机图像或通过调用服务。更改应在5秒后发生,或作为指令的输入。这可能吗?有人能帮我开始吗 我还将添加动画到这个,但这是为以后 作为AngularJS的新手,任何帮助或指导都将不胜感激 谢谢。当一个人像这样写一个img标记源时: <img ng-src='{{imagesrc}}' /> function link(scope, element, attrs) { var format, timeo

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

我还将添加动画到这个,但这是为以后

作为AngularJS的新手,任何帮助或指导都将不胜感激

谢谢。

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

<img ng-src='{{imagesrc}}' />
function link(scope, element, attrs) {
    var format,
        timeoutVal;

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

    element.on('click', function() {
      updateAttrs(value);
    });
  }
请参见此处的完整plunkr:

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

<img ng-src='{{imagesrc}}' />
function link(scope, element, attrs) {
    var format,
        timeoutVal;

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

    element.on('click', function() {
      updateAttrs(value);
    });
  }
请参见此处的完整plunkr:

您可以编写指令,并在链接函数中编写如下内容:

<img ng-src='{{imagesrc}}' />
function link(scope, element, attrs) {
    var format,
        timeoutVal;

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

    element.on('click', function() {
      updateAttrs(value);
    });
  }
som链接中可以使用的位置。 此代码段不起作用,但它可以让您对该机制有一些了解。
另一种方法是使用ng mouseover并在父控制器中创建一个函数,该函数将更改元素的属性。

您可以编写一个指令,并在链接函数中编写如下内容:

<img ng-src='{{imagesrc}}' />
function link(scope, element, attrs) {
    var format,
        timeoutVal;

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

    element.on('click', function() {
      updateAttrs(value);
    });
  }
som链接中可以使用的位置。 此代码段不起作用,但它可以让您对该机制有一些了解。
另一种方法是使用ng mouseover并在父控制器中创建一个函数,该函数将更改元素的属性。

感谢您的时间和努力。但这对我来说是最基本的:-我在寻找一个例子,如何在指令中实现这一点,因为我想创建一个类似旋转木马的东西。让我们假设图像放置在一个表的三行三列中。这是九张图片。它们中的每一个都应该在随机时间使用从一系列图像中随机选择的新图像进行更改。我明白了吗?哇!!谢谢彼得!!!!看来你说到点子上了。今晚我会仔细看看这个。谢谢你的时间和努力。但这对我来说是最基本的:-我在寻找一个例子,如何在指令中实现这一点,因为我想创建一个类似旋转木马的东西。让我们假设图像放置在一个表的三行三列中。这是九张图片。它们中的每一个都应该在随机时间使用从一系列图像中随机选择的新图像进行更改。我明白了吗?哇!!谢谢彼得!!!!看来你说到点子上了。今晚我会仔细看看这个。