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

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

而我的图片源代码被最后一张图片覆盖了。

2.) 第二种方法 HTML + 发射最后一个重复元素

<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 次并获得正确格式的网址？

所以{{link.url}} 应该是例如http://www.google.com 或 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.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;
    }
});