We Keep Coding

Displaying Image in Angular

and I want to display an image im my <img src>
when I clicked the button select image it displays all the information of the image but it doesn't show any img at all. I call the information of the image in my app.js using .directive
.directive("filesInput", function() {
return {
require: "ngModel",
link: function postLink($scope, elem, attrs, ngModel) {
elem.on("change", function(e) {
var files = elem[0].files;
ngModel.$setViewValue(files);
// var imageData = _.map(files, 'name');
$scope.img = files;
console.log(files);
})
}
}
});
How can I call the .directive("filesInput") to my controller to display in my .html
<img src="{{files}}">

Looks like the problem is in the directive, where it is setting the image. So it sets the scope img but not the variable. The img would need the full path e.g.
<img ng-src="{{img}}">
or depending on the location you would need to prepend the image path before it such as
<img ng-src="'/pathofimage/' + {{img}}">

Angularjs uses data-src automatically - want to use jquery.unveil.js

i what LazyLoading images with Unveil inside an Angular app. Unveil uses the real Image URL in data-src and can't use a custom "data attribute" like data-unveil.
The Problem is that Angular is automatically converting "data-src" to "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>

You can use a directive:
app.directive('unveil', function () {
return {
link: function (scope, element, attrs) {
$(element).unveil();
}
};
});
http://plnkr.co/edit/9KLLqHiT4KC2Z9onUizy?p=preview
Rule of thumb: always use directives if you want to integrate jquery plugins.

If you have scope values like scope.url = 'www.myurl.com', and you want to to like this:
<img unveil data-src="{{url}}" src="placeholder.png">
That won't work because unveil does not understand {{url}}. Do it like this instead:
<img unveil unveil-source="{{url}}" unveil-source-retina="{{retinaUrl}}" src="placeholder.png">
With this directive:
app.directive('unveil', unveil);
function unveil() {
return {
restrict: 'A',
scope: {
unveilSource: '#unveilSource',
unveilSourceRetina: '#unveilSourceRetina'
},
link: link
};
function link(scope, element, attrs) {
/* Set compiled src attributes before calling unveil */
attrs.$set('dataSrc', scope.unveilSource || scope.unveilSourceRetina);
attrs.$set('dataSrcRetina', scope.unveilSourceRetina);
$(element).unveil();
}
}

You should use ng-attr instead.
ng-attr-data-src='{{var}}'

Angular - directive to repeat images

I'm new to Angular JS and am trying to create a custom directive that creates img tags based on a list of urls and then performs some DOM manipulation afterward. I want to have the images fade in and out over time, like a slideshow. So far, I've got the images added to the DOM, but I can't find anywhere in the compile or link functions that allows me to manipulate the images, as the ng-repeat doesn't appear to have rendered yet. Any ideas?
The directive:
Logger.app.directive("ngSlideshow", function ($compile) {
return {
restrict: "A",
templateUrl: "templates/slideshow.html",
scope: {
pictures: "=ngSlideshow"
},
link: {
post: function(scope, element, attributes) {
var length = $(element).find("img").length; // 0
}
}
};
});
The template:
<div class="spinner">
<img src="{{picture}}" ng-repeat="picture in pictures" alt="" />
</div>
The view:
<div class="pictures" ng-slideshow="log.pictures"></div>
Thanks!
Chris

AngularJS parallax effect directive not applying on application load

I'm creating application using AngularJS + ngRoute module + Angular Bootstrap UI. I've created index.html page and few templates, that are being loaded through ng-view directive placed in index.html.
Currently I'm trying to make parallax effect on background images, based on this plugin:
https://github.com/brettdonohoo/angular-parallax
http://brettdonohoo.com/angular-parallax/index.html
In one of my views I have DIV element, that has parallax directive on it.
<div parallax-background parallax-offset="0.4" parallax-ratio="0.7" class="slide" style="background-image: url('{{covers[0].image}}')" ng-click="open(covers[0])"></div>
The problem is - when I'm loading application, the directive is fired correctly on the DIV element, but the background-position css does not change. When I scroll window - background-position changes OK. But I need the position to be applied on initial change too.
When I move my DIV element out of the template to the index.html it works. But of course I would like it to display only one one subpage.
My directive:
.directive('parallaxBackground', ['$window',
function ($window) {
return {
restrict: 'A',
transclude: true,
template: '<div ng-transclude></div>',
scope: {
parallaxRatio: '#',
parallaxOffset: '#',
},
link: function ($scope, elem, attrs) {
var setPosition = function () {
var calcValY = (elem.prop('offsetTop') - $window.pageYOffset) * ($scope.parallaxRatio ? $scope.parallaxRatio : 1.1) - ($scope.parallaxOffset ? $scope.parallaxOffset : 0) * $window.innerHeight;
elem.css('background-position', "50% " + calcValY + "px");
};
angular.element($window).bind('load', function (e) {
setPosition();
$scope.$apply();
});
angular.element($window).bind("scroll", setPosition);
} // link function
};
}
]);

How to add a hover background image style on a div the Angularjs way

I have a background image on a div that I want to have switch on hover. I can't change the class because I'm using a bound property to fill in the information. As far as I know I don't see any way to add hover with styles inside of the html and I found a way to do it in jquery but it just doesn't seem like the angular way.

Method #1: No controller, everything in template.
<div ng-init="bg = ''"
ng-mouseenter="bg = 'http://www.gravatar.com/avatar/b76f6e92d9fc0690e6886f7b9d4f32da?s=100'"
ng-mouseleave="bg = ''"
style="background-image: url({{bg}});">
</div>
Method #2: Using vars to store the values (uses a controller)
<div ng-mouseenter="bg = imageOn"
ng-mouseleave="bg = imageOff"
style="background-image: url({{bg1}});">
</div>
Controller:
function myCtrl($scope){
$scope.bg1 = "" // this is the default image.
$scope.imageOn = "http://www.gravatar.com/avatar/b76f6e92d9fc0690e6886f7b9d4f32da?s=100";
$scope.imageOff = ""; // image that would after after the mouse off.
}
Method #3: Saved the best for last! Using a directive!!
<div hover-bg-image="{{image}}"></div>
Directive (could be improved to revert back to original image if there is one... its basic to show example):
.directive('hoverBgImage',function(){
return {
link: function(scope, elm, attrs){
elm.bind('mouseenter',function(){
this.style.backgroundImage = 'url('+attrs.hoverBgImage+')';
});
elm.bind('mouseleave',function(){
this.style.backgroundImage = '';
})
}
};
});
Controller:
function withDirective($scope){
$scope.image = "http://www.gravatar.com/avatar/b76f6e92d9fc0690e6886f7b9d4f32da?s=100";
}
Note: The items in the controllers could/should/would be set dynamically.
Demos: http://jsfiddle.net/TheSharpieOne/kJgVw/1/