For some reason I am not able to see, my Carousel will not appear. My project requires slightly different implementation than what is defined here. It should work fine though, I've outlined the details below.
Clicking my button toggles openModal, where I specify my scope as modal:
openModal() {
var _this = this;
this.$uibModal.open({
animation: true,
templateUrl: 'components/directives/modals/Modal/Modal.html',
controller: 'ModalController',
controllerAs: 'modal',
size: 'lg',
}
});
}
In this controller I declare some variables in the constructor:
//Carousel Variables
this.active = 0;
this.currIndex = 0;
this.slides = [];
this.addSlide();
This calls my controller function addSlide:
addSlide() {
for (var i=0;i<4;i++) {
this.slides.push({
image: 'https://unsplash.it/600/300',
text: ['Getting Started', 'Awesome photograph', 'That is so cool', 'I love that'][this.slides.length % 4],
id: this.currIndex++
});
}};
HTML
<div style="height: 200px;">
<div uib-carousel active="modal.active" interval="0" no-wrap="false">
<div uib-slide ng-repeat="slide in modal.slides" index="modal.slide.id">
<img ng-src="{{modal.slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{modal.slides.id}}</h4>
<p>{{modal.slides.text}}</p>
</div>
</div>
</div>
</div>
Change your markup from...
<div uib-slide ng-repeat="slide in modal.slides" index="modal.slide.id">
<img ng-src="{{modal.slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{modal.slides.id}}</h4>
<p>{{modal.slides.text}}</p>
</div>
</div>
...to this...
<div uib-slide ng-repeat="slide in modal.slides" index="slide.id">
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{slide.id}}</h4>
<p>{{slide.text}}</p>
</div>
</div>">
By including the modal. in there you are referencing a non-existent slide property on the controller when what you really want is to reference the slide object in your ng-repeat. (You also had slides in a couple places where I think you meant slide).
Related
I'm making slider with Angularjs using modal. I'm trying to accomplish when clicking on picture modal pops up displaying image that I have clicked.
.html
<div class="float" ng-repeat="a in $ctrl.f">
<div class="column is-narrow topIcons">
<div class="photo topIconsHover" ng-click="$ctrl.togglePicture()">
<figure class="image is-128x128">
<img ng-src="{{a.imageSrc}}">
</figure>
</div>
</div>
</div>
<div class="modal" id="myModal">
<div class="modal-background" ng-repeat="a in $ctrl.f"></div>
<div class="modal-content">
<p class="image is-4by3">
<img ng-src="{{togglePicture(a.id)}}">
</p>
</div>
<button class="modal-close" ng-click="$ctrl.closeModal()"></button>
</div>
component.js
function PhotoController($scope){
var vm = this;
vm.f = [{
albumName: "Name",
imageSrc: 'app/images/bio.jpg',
owner: "OwnerName",
id: 1
},
{ albumName: "Name",
imageSrc: 'app/images/bio.jpg',
owner: "OwnerName",
id: 2
}];
vm.togglePicture = function(id) {
$('#myModal').addClass('is-active');
};
I'm trying to get imageSrc by passing id of an image as a function parameter but is not working. What should I do in my function to select correct imageSrc using id and then to display it and how my imageSrc should look like?
Was thinking something like this <img ng-src="{{togglePicture(a.id)}}">?
Pass Selected image in funnction.
<div class="photo topIconsHover" ng-click="$ctrl.togglePicture(a)">
Then set selcted image in controller
vm.selectedImgsrc='';
vm.togglePicture = function(a) {
$('#myModal').addClass('is-active');
vm.selectedImgsrc=a.imageSrc;
};
Then modify modal to view selected image
<p class="image is-4by3">
<img ng-src="{{$ctrl.selectedImgsrc}}">
</p>
Hi I am using kenwheeler slick carousel but when I use ng-repeat on the div i get `listed images'.
What I a doing wrong here ?
<section class="regular slider" style="clear: both" ng-if="slides">
<div ng-repeat="slide in slides">
<img src="{{slide.path}}">
</div>
</section>
I tried the solutions provided here angular slick although its different but still no proper images are being displayed. without ng-repeat it works perfect.
The output is something like this image
My controller
$scope.single_product = function (product_id) {
$http.get('abc',
{headers:
{'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': $rootScope.keyword_auth_token}
})
.success(function (data) {
$scope.product = data;
$(".regular").slick({
dots: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 3,
autoplay: true,
autoplaySpeed: 2000
});
})
.error(function (data) {
console.log(data);
});
};
I am including slick.css slick-theme.css and slick.jshere is the link to all Files
Instead of src Use ng-src ng-src use to get the path of image in angularJS
Go through this link carefully and apply styles
http://kenwheeler.github.io/slick/
remove div that contains ng-repeat
<section class="regular slider" style="clear: both" ng-if="slides">
<img ng-repeat="slide in slides" ng-src="{{slide.path}}">
</section>
Use ng-src
var app = angular.module("myApp", []);
app.controller('myCtrl', function($scope) {
$scope.slides = [{
path: 'https://cloud.githubusercontent.com/assets/1734769/3162502/f49ff416-eb35-11e3-8f47-3a85f8abfd84.png'
}, {
path: 'https://cloud.githubusercontent.com/assets/1734769/3162502/f49ff416-eb35-11e3-8f47-3a85f8abfd84.png'
}, {
path: 'https://cloud.githubusercontent.com/assets/1734769/3162502/f49ff416-eb35-11e3-8f47-3a85f8abfd84.png'
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<section class="regular slider" style="clear: both" ng-if="slides">
<div ng-repeat="slide in slides">
<img ng-src="{{slide.path}}">
</div>
</section>
</div>
Try this:
<div ng-repeat="slide in slides">
<img ng-src="slide.path">
</div>
Check angular-slick README and include all css and js. Add slick to your angular.module [ let say MyApp ] dependency and use slick directives. I think you missed to use slick directives.
<section class="regular slider" style="clear: both" ng-if="slides">
<slick slides-to-show=3 slides-to-scroll=3>
<div ng-repeat="slide in slides">
<img src="{{slide.path}}">
</div>
</slick>
</section>
Using the jQuery lightGallery plugin: http://sachinchoolur.github.io/lightGallery/
So I have the following code:
JSON (array):
var gallery_json = '[{"src":"/assets/Images/Gallery-Images/img-1.jpg","thumb":"/assets/Images/Gallery-Images/img-2.jpg"},{"src":"/assets/Images/Gallery-Images/img-3.jpg","thumb":"/assets/Images/Gallery-Images/img-4.jpg"},{"src":"/assets/Images/Gallery-Images/img-5.jpg","thumb":"/assets/Images/Gallery-Images/img-wool-2015-hero-crop-sheep-river.jpg"},{"src":"/assets/Images/Gallery-Images/img-6.jpg","thumb":"/assets/Images/Gallery-Images/img-7.jpg"},{"src":"/assets/Images/Gallery-Images/img-8.jpg","thumb":"/assets/Images/Gallery-Images/img-9.jpg"}]';
JS:
$(document).ready(function () {
var $gallery = $('[data-hook="gallery"]');
if ($gallery && typeof gallery_json !== 'undefined') {
$gallery.on('click', 'img', function () {
$gallery.lightGallery({
dynamic: true,
dynamicEl: JSON.parse(gallery_json)
});
$gallery.data('lightGallery').slide($(this).parent().index());
});
}
});
MarkUp:
<div class="row" data-hook="gallery">
<div class="col-sm-3">
<img src="/assets/Images/Gallery-Images/img-1.jpg" class="img-responsive">
</div>
<div class="col-sm-3">
<img src="/assets/Images/Gallery-Images/img-2.jpg" class="img-responsive">
</div>
<div class="col-sm-3">
<img src="/assets/Images/Gallery-Images/img-3.jpg" class="img-responsive">
</div>
<div class="col-sm-3">
<img src="/assets/Images/Gallery-Images/img-4.jpg" class="img-responsive">
</div>
</div>
So basically what I am after is whichever image in the [data-hook="gallery"] is selected the dynamic light gallery will load up showing this image as the index, bear in mind my JS skills are really limited so please walk my through any solutions.
What's the best way to manipulate a template of a ng directive with jQuery? When I try to animate or toggle classes that are inside a directive's template, nothing happens. For instance:
HTML:
<div class="projects">
<h2>Projects</h2>
<div class="row">
<div class="col-lg-12">
<div class="row" ng-controller="ProjectsController">
<div class="project-boxes" ng-repeat="project in projects">
<projects-info info="project"></projects-info>
</div>
</div>
</div>
</div>
</div>
Directive's template:
<div class="prjcontainer">
<img class="boximg" ng-src="{{ info.img }}">
<p> {{ info.description }}</p>
</div>
Script
$(document).ready(function(){
$('.boximg').hover(
function() {
$(this).stop().animate({
width: '300px',
height: '300px'}, 500);
},
function() {
$(this).stop().animate({
width: '100px',
height: '100px' }, 500);
});
Directive code:
app.directive('projectsInfo', function() {
return {
restrict: 'E',
scope: {
info: '='
},
templateUrl: 'components/projects/projects-template/projectsInfo.html'
};
});
My main goal is to have a info viewer like how on the Netflix site when you hover over a show, the picture gets bigger and text displays on the inside.
Thanks!
I have a directive that displays cards for the user. Each card has an 'aww' or 'naww' button. AngularJS goes through the ng-repeat and generates each card. When the user clicks that button I want the 'aww' or 'naww' value to increment for that particular card. Unfortunately, when I click the buttons now, nothing happens and the values remain at zero. How would I get the aww and naww values to increment for each individual card?
view1.html
<div class="container">
<div ng-repeat="animal in animals" my-animal="animal"></div>
</div>
view1.js
'use strict';
angular.module('myApp.view1', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {
templateUrl: 'view1/view1.html',
controller: 'View1Ctrl'
});
}])
.controller('View1Ctrl', ['$scope',function($scope) {
$scope.animals = [{'name':'Perry','animal':'Bird','awws':0,'nawws':0,
'image-url': 'https://goo.gl/Vtcvk5'},
{'name':'Max','animal':'Cat','awws':0,'nawws':0,
'image-url':'https://goo.gl/bqOQci'
},
{'name': 'Julian','animal':'Duck','awws':0,'nawws':0,
'image-url':'https://goo.gl/v9GyTz'
}];
$scope.add = function(item){
item = item + 1;
};
}])
.directive('myAnimal', function() {
return {
scope: {
item: '=myAnimal'
},
restrict: 'EA',
templateUrl: 'view1/card-template.html'
};
});
cardtemplate.html
<div class="card">
<img class="card-img-top img-responsive" ng-src="{{item.image-url}}" alt="Cute animal">
<div class="card-block">
<h4 class="card-title">{{item.name}}</h4>
<p class="card-text">{{item.animal}}</p>
<button type="button" ng-click="add(item.awws)" class="btn btn-success">Aww +1 </button>
{{item.awws}}
<button type="button" ng-click="add(item.nawws)" class="btn btn-danger">Naww -1 </button>
{{item.nawws}}
</div>
</div>
This is happening because '$scope.add' function of your controller isn't inside the scope of your myAnimal directive(which has an isolate scope).
Also, you are using the directive in a wrong way. my-animal is your directive and not an attribute for your directive. First, change your directive calling template to:
<div class="container">
<div ng-repeat="animal in animals" my-animal animal="animal" add="add"></div>
</div>
directive to:
.directive('myAnimal', function() {
return {
scope: {
item: '=animal',
add: '&' //method binding here
},
restrict: 'EA',
templateUrl: 'view1/card-template.html'
};
});
As you can see I have added another attribute which binds the 'add' function in your controller to the directive, thus making it available in the directive scope. & is used for achieving this.
Issue is you are passing literal value of aww in ng-click function, where as you should pass the item object and increment its item.awws property.
<div class="card">
<img class="card-img-top img-responsive" ng-src="{{item.image-url}}" alt="Cute animal">
<div class="card-block">
<h4 class="card-title">{{item.name}}</h4>
<p class="card-text">{{item.animal}}</p>
<button type="button" ng-click="add(item)" class="btn btn-success">Aww +1 </button>
{{item.awws}}
<button type="button" ng-click="add(item.nawws)" class="btn btn-danger">Naww -1 </button>
{{item.nawws}}
</div>
</div>
and in js...
$scope.add = function(item){
item.awws += 1;//it might be required to find the item in the collection and then increment it
};
}])
Or, the easiest would be to do it directly in HTML
<div class="card">
<img class="card-img-top img-responsive" ng-src="{{item.image-url}}" alt="Cute animal">
<div class="card-block">
<h4 class="card-title">{{item.name}}</h4>
<p class="card-text">{{item.animal}}</p>
<button type="button" ng-click="item.awws = item.awws + 1" class="btn btn-success">Aww +1 </button>
{{item.awws}}
<button type="button" ng-click="item.nawws = item.nawws - 1" class="btn btn-danger">Naww -1 </button>
{{item.nawws}}
</div>
</div>