javascript - Angularjs 自动使用 data-src - 想要使用 jquery.unveil.js

Question

我用 Unveil 延迟加载图像在 Angular 应用程序内。 Unveil 使用 data-src 中的真实图像 URL，并且不能使用像 data-unveil 这样的自定义“数据属性”。

问题是 Angular 会自动将“data-src”转换为“src”。 WTF!

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
    <ul>
        <li>Angular uses data-src as src attribute</li>
        <li ng-repeat="foo in ['Photo A', 'Photo B']">
            <img data-src="http://placehold.it/250x150&text={{foo}}" src="http://placehold.it/250x150&text=LazyLoad" />{{foo}}
        </li>
    </ul>
    <ul>
        <li>Changed "data-src" to "data-unveil", but unveil can't use it</li>
        <li ng-repeat="bar in ['Photo A', 'Photo B']">
            <img data-unveil="http://placehold.it/250x150&text={{bar}}" src="http://placehold.it/250x150&text=LazyLoad" />{{bar}}
        </li>
    </ul>
</div>

Answer 1

您可以使用指令:

app.directive('unveil', function () {
  return {
    link: function (scope, element, attrs) {
        $(element).unveil();            
    }
  };
});

http://plnkr.co/edit/9KLLqHiT4KC2Z9onUizy?p=preview

经验法则:如果您想集成 jquery 插件，请始终使用指令。