Сделайте работу держателя.js с угловым

Question

Когда мы положили <img src="holder.js/300x200"> в ng-app, это не сработает, но когда мы выставим его на улицу, он делает. Что дает?

Answer 1

Если добавить эту директиву

app.directive('holderFix', function() { 
    return { 
     link: function (scope, element, attrs) { 
      Holder.run({ images: element[0], nocss: true }); 
     } 
    }; 
}); 

Затем обе эти элементы работают

<img data-src="holder.js/300x200" holder-fix> 
<img src="holder.js/300x200" holder-fix> 

Испытано в

• Chrome версии 32.0.1700.107 м

Смотрите также:

https://github.com/imsky/holder/pull/26

Answer 2

Если следовать holder.js проект, связанный втягивания запрос в другой ответ, есть несколько улучшилось решение здесь https://github.com/imsky/holder/pull/26#issuecomment-51218083 который я воспроизведет ниже ...

В Javascript:

angular.module('MyModule').directive('myHolder', function() { 
    return { 
     link: function(scope, element, attrs) { 
      attrs.$set('data-src', attrs.myHolder); 
      Holder.run({images:element.get(0), nocss:true}); 
     } 
    }; 
}); 

И в HTML:

<img my-holder="holder.js/200x300"> 

Это улучшение позволяет указать my-holder (или что бы вы ни выбрали) на местеdata-src вместо того, чтобы указывать его как дополнительный атрибут.

(Кредит Ник Кларк и Трис Ding для этого решения.)

Answer 3

Вы можете использовать ng-holder директивы, которые доступны для запуска ваших holder.js

она доступна здесь ng-holder

Для краткости просто включите директиву и добавьте ngHolder в ваше приложение, вот полный код директивы, который я получаю от официального github.

(function(window, angular, undefined) { 
    'use strict'; 
    var module = angular.module('ngHolder', []); 
    module.directive('holder', [ 
     function() { 
      return { 
       link: function(scope, element, attrs) { 
       if(attrs.holder) 
        attrs.$set('data-src', attrs.holder); 
       Holder.run({images:element[0]}); 
       } 
      }; 
     }]); 
})(window, window.angular); 

Тогда в вашем приложении просто добавить ngHolder, как эта

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

и в вашем частичном шаблоне использовать библиотеку как этот

<img holder="holder.js/490x280/text:some text"/> 

надежде, что это поможет.