AngularJS

Question

我尝试将动态图片添加到我的 div 中，这是我通过 url2img 插件实现的。效果很好。但是当我通过 ng-repeat 循环时，它会为我循环中的每个 div 加载最后一张图片。所以它循环了 15 次。我有 2 种方法现在不起作用。

1.) HTML + load-img-from-ext<-指令

<div ng-repeat="link in links">
    <div class="jumbotron">
      <div>
        {{link.title}}
      </div>
      <div>
        <img class="img-thumbnail img-thumb-ext" id="thumb-{{$index}}" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" load-img-from-ext="{{link.url}}"/>
      </div>
    </div>
  </div>

1.) 指令

.directive("loadImgFromExt", ['$timeout', function (timer) {
    return {
      link: timer(function (scope, elem, attr) {

          $(".img-thumb-ext").each(function () {
             console.log(attr[loadImgFromExt]);
            $.ajax({
              url: 'https://www.googleapis.com/pagespeedonline/v1/runPagespeed?url=' + attr["loadImgFromExt"] + '&screenshot=true',
              context: this,
              type: 'GET',
              dataType: 'json',
              success: function (data) {
                data = data.screenshot.data.replace(/_/g, '/').replace(/-/g, '+');
                $(this).attr('src', 'data:image/jpeg;base64,' + data);
              }
            });
          })
        }
      }
    }
 }])

在屏幕上呈现的 5 个元素循环 15 次。所以控制台日志的输出是

0

0 1

0 1 2

0 1 2 3

0 1 2 3 4

我的图片 src 被最后一张图片覆盖了。

2.) 第二种方法 HTML + emit-last-repeater-element<-指令 +data-url in img

<div ng-repeat="link in links" emit-last-repeater-element>
    <div class="jumbotron">
      <div>
        {{link.title}}
      </div>
      <div>
        <img class="img-thumbnail img-thumb-ext" id="thumb-{{$index}}" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" alt="{{link.url}}" data-url="{{link.url}}"/>
      </div>
    </div>
  </div>
  </div>

2.) 指令

.directive('emitLastRepeaterElement', function() {
    return function(scope) {
      if (scope.$last){
        scope.$emit('LastRepeaterElement');
      }
    };
  });

2.) 调用

的控制器

$scope.$on('LastRepeaterElement', function(){
      console.log('good to go');
      $('img[data-url]').each(function() {
        console.log($(this)[0].attributes[3])
        console.log($(this)[0].attributes[3].nodeValue);
        //var myUrl = $(this)[0].attributes[3];
        console.log($(this).data('url'));
        $.ajax({
          url: 'https://www.googleapis.com/pagespeedonline/v1/runPagespeed?url=' + $(this).data('url') + '&screenshot=true',
          context: this,
          type: 'GET',
          dataType: 'json',
          success: function(data) {
            data = data.screenshot.data.replace(/_/g, '/').replace(/-/g, '+');
            $(this).attr('src', 'data:image/jpeg;base64,' + data);
          }
        });
      });
    });

这行得通，所以它只循环了 5 次。但是 $(this).data('url'); 输出 {{link.url}}，而不是像 http://www.google.com.

这样的 url

$(this)[0].attributes[3] 输出 data-url="http://www.google.com" 并且是 object

的一种

$(this)[0].attributes[3].nodeValue ouputs {{link.url}} 是 string

的一种

谁能告诉我如何只循环 5 次并获得正确格式的 url？

所以 {{link.url}} 应该是http://www.google.com or http://www.yahoo.com 这样我就可以在我的 ajax 请求中的 url 属性中使用它。

Answer 1

我开始相信 jQuery 专业知识是学习的积极障碍 Angular：您习惯的许多技术与您在 Angular。您显然习惯于将 DOM 用作数据存储——在 Angular 中，您需要将其更多地视为数据模型的副作用表示。

每个指令都有自己的 link.url 作用域，因此无需遍历 jQuery 中的 DOM 并收集每个 link.url指示。同样，没有理由继续读取和设置 DOM 属性的数据——使用指令范围；您需要的所有数据都已经存在。

<div ng-repeat="link in links">
    <div class="jumbotron">
      <div>{{link.title}}</div>
      <div>
        <img ng-src="{{link.parsedUrl}}">
      </div>
    </div>
</div>

...并在指令 link 函数中，直接从 link.url:

构造 link.parsedUrl

$.ajax({ // or, better, use $http
    url: 'https://www.googleapis.com/pagespeedonline/v1/runPagespeed?url=' + scope.link.url + '&screenshot=true',
    context: this,
    type: 'GET',
    dataType: 'json',
    success: function(data) {
        data = data.screenshot.data.replace(/_/g, '/').replace(/-/g, '+');
        scope.link.parsedUrl = 'data:image/jpeg;base64,' + data;
    }
});

AngularJS - 指令 + ng-repeat，5 个元素，循环 15 次

AngularJS - Directive + ng-repeat, 5 elements, loops 15 times

jquery

angularjs-directive

ng-repeat