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}}">
Related
I am using ElevateZoom plugin in my application. If the image resolution is good it is able to zoom but when the image resolution is small it's not working.
Here is the code:
description.jsp
<img ng-if="mlist.typeId===1"
ng-elevate-zoom
zoom-image="{{mlist.mediaUrl}}" id="zimg{{$index}}"
actual-src="{{mlist.mediaUrl}}" loader-src="resources/images/loading.gif" loader-class="preloader" showloader
class="img-responsive zoomImg" alt=""/>
where zoom-image, actual-src data-zoom-image all having same image.
app.js
app.directive('ngElevateZoom', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
//Will watch for changes on the attribute
attrs.$observe('zoomImage',function(){
linkElevateZoom();
})
function linkElevateZoom(){
//Check if its not empty
if (!attrs.zoomImage) return;
element.attr('data-zoom-image',attrs.zoomImage);
$(element).elevateZoom({zoomType:"lens", cursor:"crosshair"/*, lensSize:250*//**/ /*scrollZoom:true*//*, containLensZoom:true*/});
}
linkElevateZoom();
}
};
});
Plugin : elevatezoom
First what I want:
I have a series of thumbnails. When I click on one, I want that specific thumbnail to be shown in a bigger div, with its description. (For later: should be animated).
Now I have the directive and the controller, but I don't know how to set the appropriate variable!
So some code:
First HTML: here is the root .jade file for this section. I have a directive called product.
section
.detail-view(ng-show="vm.showDetail")
.prod-desc(ng-bind="vm.detailPic")
.prod-img(ng-bind="vm.detailDesc")
product.col-xs-12.product_tile(ng-repeat="item in vm.products", item="::item")
As you can see, the product directive is part of an ng-repeat; for this reason, the div I want to show the resized image is outside the iteration (.detail-view).
The product directive:
'use strict';
ProductDirective.$inject = ['ShopCart', '$animate', 'User'];
function ProductDirective(ShopCart, $animate, User) {
return {
restrict: 'E',
scope: {
item: '='
},
template: require('./product.html'),
link: link
};
function link(scope, element) {
scope.toggleDetails = toggleDetails;
}
function toggleDetails() {
if (!scope.isSelected && isBlurred()) return;
scope.vm.detailPic = scope.item.photo;
scope.vm.detailDesc = scope.item.prod_description;
scope.vm.isSelected = !scope.isSelected;
scope.showDetail = !scope.showDetail;
var action = scope.isSelected ?
}
}
Now the div I want to update with the image in big is outside the iteration - and hence outside the scope of the directive. How can I set the value of showDetail, showDesc and showPic?
As I am using controllerAs with value vm, I thought I could just do scope.vm.detailPic = scope.item.photo;, as in other solutions I have seen that when setting a property on a root object, it would be propagated...but I get
Cannot set property 'detailPic' of undefined
For now, what works (but looks a bit odd to me) is this, in toggleDetails()
scope.$parent.$parent.vm.detailPic = scope.item.photo;
scope.$parent.$parent.vm.detailDesc = scope.item.prod_description;
scope.$parent.$parent.vm.showDetail = !scope.$parent.$parent.vm.showDetail
Im creating a hybrid application using Cordova, AngularJs and Ionic. Im getting my data from Wordpress using a JSON API plugin.
Here is my single post view :
<ion-view view-title="Single View">
<ion-content>
<div class="card single-view" ng-show="show_post">
<div class="title" ng-bind-html="data['post'].title"></div>
<div class="thumb">
<img ng-src="{{data['post'].thumbnail_images['single-post-thumb'].url}}" />
</div>
<div class="content" ng-bind-html="data['post'].content"></div>
</div>
</ion-content>
</ion-view>
Is there any way to add a click listener on every image that will be generated on my content div, so i can open a modal with a full size image when i click on it thumb ?
P.S: I dont use jquery, In JQuery it will be something like :
$('.content > a > img ').bind("click", function(e){
//open my modal..
});
Simply create a directive with a link function that will add the plugin and decorate all your images with it. Something like this:
<img ng-src="{{url}}" image-modal />
and
app.directive('imageModal', function() {
return {
link: function(scope, elem, attrs) {
var options = {}; // settings.
elem.modal(options);
// maybe add a elem.on('click', function(){}) for showing the modal
}
};
});
I finally managed to find a solution !
The data that i recieve from my Wordpress Api contains images inside links, its something like this :
<img src=".." />
So instead of directly putting my html content inside the ng-bind-html, i managed to do something like this :
I save my html content inside a variable then i use the replace function to replace all the href attributes with the ng-click="showImage()" img-src=
$scope.data = items;
var post_content =items['post'].content;
$scope.content=$sce.trustAsHtml(post_content.replace(/href=/gm, 'ng-click="showImage()" img-src='));
I binded this html code using template attribute :
<div class="post-content" template="{{content}}"></div>
I recompiled my html code using a directive like this :
angular.module('starter.controllers', [])
.controller(............)
.directive( 'showData', function ( $compile ) {
return {
scope: true,
link: function ( scope, element, attrs ) {
var el;
attrs.$observe( 'template', function ( tpl ) {
if ( angular.isDefined( tpl ) ) {
el = $compile( tpl )( scope );
element.html("");
element.append( el );
}
});
}
};
});
I just need to know how to check if the href contain an image or not.
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
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/