Question

我需要设置一个仪表板，其中包含一些数据图像，这些图像每隔几秒钟就会发生变化。所以我需要不断更新图片的src，以包含更改，例如图片位于/images/graph1.png，10秒后我会将其更新为/images/graph1.png?a=1，然后只需每隔10秒更改a的值。

所以我认为我应该以一种统一和模块化的方式解决这个问题的方式是指令。但我不知道如何更改变量值从指令，我已经传递给它。

App.directive("updatable", function($interval){
    return {
        restrict: "E",
        link: (function(){
            // Can I change the image source here...?
        }),
        replace: true,
        template: "<img src='{{ src }}'/>"
    }
});

我唯一发现的是，有一种方法可以通过访问link对象来访问$observe函数中作为参数传递的值，然后查看更改。但我无法从指令中启动更改。

所以在这种情况下，我会将图像放在文档中：

<updatable src="{{ graphSource }}"></updatable>

理想情况下，我希望放在link函数中的内容将是：

if(scope.src.indexOf('?') == -1) {
    scope.src+= "?a=";
}
scope.src+= "1";

任何事情只是为了真正改变src。但是这个代码当然不起作用。

在指令环境中是否有解决方案，或者有更好的方法可以解决这个问题吗？

Answer 1

我在此runnable fiddle demo中为您创建了一个简单的指令。图像源和间隔持续时间可以通过以下属性进行配置：src-image＆amp; interval直接在指令HTML元素中。它工作得很好=）

视图

<div ng-controller="MyCtrl">
  <div class="email_log_container"> 
    <img src-image="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" 
         interval="10000" 
         height="50" 
         width="50"
         updatable /> 
  </div>
</div>

AngularJS应用程序

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

myApp.controller('MyCtrl', function($scope) {
});

myApp.directive('updatable ', function ($interval) {
  return{
    restrict:'A',
    link:function(scope, element, attr){
      var i = 0;
      attr.$set('src', attr.srcImage + '&a=' + i); //init
      $interval(function() {
        attr.$set('src', attr.srcImage + '&a=' + i);
        i++;
      }, attr.interval);            
    }
}});

Answer 2

您好，这是我提出的代码：

<强> HTML：

<img src="https://blog.apnic.net/wp-content/uploads/2014/11/https-1.jpg" updatable interval="10000">

<强>的Javascript

app.directive('updatable', function($interval) {

  return {
    restrict: 'A',
    link: function(scope, element, attrs, ngModelCtrl) {
      var currentStep = 1;
      var initialSrc = element[0].src;
      var interval = typeof attrs.interval === 'undefined' ? 10000 : parseInt(attrs.interval);

      $interval(function() {

        element[0].src = initialSrc + '?a=' + currentStep;
        currentStep++;
        console.log(element[0].src);

      }, interval);

    }
  };
});

JsFiddle

我确信可以有很多不同的实现

Answer 3

您可以定义本地src来解决问题。

const App = angular.module("a", []);

App.directive("updatable", ["$interval", function($interval) {
  return {
    scope: {
      "origin": "<originalSrc"
    },
    restrict: "E",
    link: (function(scope, element) {
      const src1 = "?a=";
      let cnt = 1;

      function update() {
        scope.src = src1 + cnt;
        cnt++;
      }
      update();
      $interval(update, 1000);

    }),
    replace: true,
    template: `
    <div>
      <label ng-bind="origin+src"></label>
      <img ng-src="{{origin+src}}" />
    </div>
    `
  }
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<div ng-app="a">
  <updatable original-src="'http://example.com/a.jpg'">

  </updatable>
</div>

不断刷新的HTML图像

3 个答案:

视图

AngularJS应用程序