I have a Jssor slider which is running fine with the jQuery version. But when I put the code and JS files into my AngularJS app, it is not working. I get the following error in my console:
Uncaught TypeError: Cannot read property 'currentStyle' of undefined
Is there any specific way to work with Jssor slider in AngularJS?
var app = angular.module('slider', []);
app.controller('sliderCtrl', function($scope){
this.slides = [
{heading: 'movies', number: 115, panel: 'panel-green'},
{heading: 'viewed', number: 252 , panel: 'panel-primary'},
{heading: 'streams', number: 354 , panel: 'panel-yellow'},
{heading: 'length', number: 471 , panel: 'panel-green'},
{heading: 'Spent', number: 589, panel: 'panel-red'},
{heading: 'viewed two', number: 789 ,panel: 'panel-yellow'},
{heading: 'streams two', number: 412 , panel: 'panel-green'},
{heading: 'length two', number: 456, panel: 'panel-red'}
];
$scope.data = this;
});
<div id="wrapper">
<div class="row" id="page-wrapper" ng-controller="sliderCtrl">
<div id="slider1_container">
<div u="slides" class="slides" class="col-lg-2 col-custom-lg-2 col-md-4">
<div ng-repeat="div in data.slides" class="panel {{div.panel}}">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
</div>
<div class="col-xs-12 text-right">
<div class="huge">{{div.number}}</div>
<div >{{div.heading}}</div>
</div>
</div>
</div>
</div>
</div>
<span u="arrowleft" class="jssora03l arrowleft"></span>
<span u="arrowright" class="jssora03r arrowright"></span>
</div>
</div>
I just tried the above code and it is working in my main HTML layout. However, when I put it into my template, it is not working and I encounter the same error.
Try to use ng-class. Or there is problem
with jssor initialization. It's better to create directive for jssor slider. Here is already AngularJS directive for jssor slider. Use it!
Related
I'am migrating a template from odoo 12 to Odoo 14 and using "owl.carousel" and other JS, and none of them work. I got these errors when implementing owl.carousel :
odoo.define('website_theme.frontend_layout', function (require) {
'use strict';
$('.class1').owlCarousel({
navigation : true,
loop:true,
margin:10,
responsive:{
0:{ items:1
},
1000:{ items:2
},
2000:{
items:3}
}
})
$('.class2').vegasMenu();
});
<div class="d-none d-xl-block header-top">
<div class="container">
<div class="row align-items-center">
<div class="col-md-4 col-lg-7">
<div class="class1 owl-carousel owl-theme">
<div class="item">
</div>
<div class="item">
</div>....
Any help please? How can I solve it ?
You missed a comma on the navigation line
I trying to use directives to show controller data in the my view but nothing displays and there are no errors in the console. I am able to log the data but the data will not show in view. Am I using directives the correct way? How do I show the data in the view? Thank you.
index.html
<body ng-app="GameboardApp">
<div class="header">
<h1 class="logo">GameBoard</h1>
</div>
<div class="main" ng-controller="ScoreController">
<div class="container">
<div class="row" >
<game ng-repeat="score in scores" info="score"></game>
</div>
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/ScoreController.js"></script>
<!-- Directives -->
<script src="js/directives/game.js"></script>
App.js
var app = angular.module('GameboardApp', []);
Controllers
ScoreController:
app.controller('ScoreController', ['$scope', function($scope) {
$scope.scores = [
{
datetime: 1420848000000,
visitor_team: {
city: "Charlotte",
name: "Hornets"
},
home_team: {
city: "New York",
name: "Knicks"
},
period: "Final",
visitor_score: 110,
home_score: 82
},,
...
},
{
datetime: 1420848000000,
visitor_team: {
city: "Orlando",
name: "Magic"
},
home_team: {
city: "Portland",
name: "Trail Blazers"
},
period: "First Quarter",
visitor_score: 13,
home_score: 26
}
];
console.log($scope.scores);
}]);
directives
game.js
app.directive('game', function() {
return {
restrict: 'E',
score: {
info: '='
},
templateUrl: 'js/directives/game.html'
}
})
game.html
<div class="col-sm-4">
<div class="row scorecard">
<p class="period">{{info.period}}</p>
<div class="visitor col-xs-4">
<h2 class="visitor-score">{{info.visitor_score}}</h2>
<h3>
<span class="visitor-city">{{info.visitor_team.city}}</span><br/>
<span class="visitor-name">{{info.visitor_team.name}}</span>
</h3>
</div>
<div class="dash col-xs-3">
<h2>-</h2>
</div>
<div class="home col-xs-4">
<h2 class="home-score">{{info.home_score}}</h2>
<h3>
<span class="home-city">{{info.home_team.city}}</span><br/>
<span class="home-name">{{info.home_team.name}}</span>
</h3>
</div>
</div>
In game.js file, where you have created the directive, you have misspelled the field name. It should be scope not score.
Hi can anybody help me for this,
I am want to display div 'entry' but somehow condition is not working.I want to display div according to blog_type.How to do?
Here is my js code:
app.controller('blog_controller', function ($scope, $http) {
$scope.blog=[
{
middle:{
title:'THIS IS A STANDARD POST WITH A PREVIEW IMAGE',
full_img:'1.jpg',
content:'Asperiores',
thumb:'1.jpg',
date:'10th Feb 2014',
blog_type:'Image'
},
middle:{
title:'THIS IS A STANDARD POST WITH A PREVIEW IMAGE',
full_img:'1.jpg',
content:'Asperiores, sque.',
thumb:'1.jpg',
date:'5th Feb 2014',
blog_type:'Video'
},
}
];
});
Here is my html code:
In ng-if iam checking value of blog_type and display div but the condition becoming true for Video only.
<div id="posts" class="small-thumbs alt" ng-repeat="b in blog">
<div class="entry clearfix" ng-if="b.middle.blog_type == 'Image'">
<div class="entry-image">
</div>
</div>
</div>
your $scope.blog object declaration is wrong, you are declaring one object with duplicate properties. For your scenario you have to declare objects of array.
here is the valid code segment
var app = angular.module("app", []);
app.controller('blog_controller', function($scope, $http) {
$scope.blog = [{
title: 'THIS IS A STANDARD POST WITH A PREVIEW IMAGE',
full_img: '1.jpg',
content: 'Asperiores',
thumb: '1.jpg',
date: '10th Feb 2014',
blog_type: 'Image'
}, {
title: 'THIS IS A STANDARD POST WITH A PREVIEW IMAGE',
full_img: '1.jpg',
content: 'Asperiores, sque.',
thumb: '1.jpg',
date: '5th Feb 2014',
blog_type: 'Video'
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" , ng-controller="blog_controller">
<div id="posts" class="small-thumbs alt" ng-repeat="b in blog">
<div class="entry clearfix" ng-if="b.blog_type == 'Image'">
<div class="entry-image">
test
</div>
</div>
</div>
</div>
Your $scope.blog value is incorrect. First of all, it is an array of a single object. Furthermore, the object itself has multiple middle parameters, which is should throw error if you run js in strict mode. use strict on top. What you need to do is to change the $scope.blog to following;
$scope.blog=[
{
title:'THIS IS A STANDARD POST WITH A PREVIEW IMAGE',
full_img:'1.jpg',
content:'Asperiores',
thumb:'1.jpg',
date:'10th Feb 2014',
blog_type:'Image'
},
title:'THIS IS A STANDARD POST WITH A PREVIEW IMAGE',
full_img:'1.jpg',
content:'Asperiores, sque.',
thumb:'1.jpg',
date:'5th Feb 2014',
blog_type:'Video'
},
];
This is new html code:
<div id="posts" class="small-thumbs alt" ng-repeat="b in blog">
<div class="entry clearfix" ng-if="b.blog_type == 'Image'">
<div class="entry-image">
</div>
</div>
</div>
I am trying to ng-include inside a ng-repeat. But nothing happens. If I include it statically with the whole link it works. Also tried ng-src but also not working.
index.html
<div ng-controller="sliderCtrl">
<div ng-repeat="slide in slides">
<div ng-include src="'/partials/slider/{{slide.image}}.html'"></div>
</div>
</div>
sliderCtrl.js
MyApp.controller('sliderCtrl', function ($scope) {
$scope.slides = [
{image: '01', description: 'Image 00'},
{image: '02', description: 'Image 01'},
{image: '03', description: 'Image 02'}
];
});
console
Error: [$interpolate:noconcat] http://errors.angularjs.org/1.3.15/$interpolate/noconcat?p0='%2Fpartials%2Fslider%2F%7B%7Bslide.image%7D%7D.html'
at Error (native)
at http://192.168.33.77/bower_components/angular/angular.min.js:6:417
at g (http://192.168.33.77/bower_components/angular/angular.min.js:88:436)
at Oa (http://192.168.33.77/bower_components/angular/angular.min.js:68:208)
at X (http://192.168.33.77/bower_components/angular/angular.min.js:53:397)
at S (http://192.168.33.77/bower_components/angular/angular.min.js:51:428)
at S (http://192.168.33.77/bower_components/angular/angular.min.js:52:95)
at D (http://192.168.33.77/bower_components/angular/angular.min.js:49:467)
at fa (http://192.168.33.77/bower_components/angular/angular.min.js:61:43)
at S (http://192.168.33.77/bower_components/angular/angular.min.js:51:465) <div ng-view="" class="page ng-scope">
Thanks in advance!
Instead of:
<div ng-include src="'/partials/slider/{{slide.image}}.html'"></div>
Use this:
<div ng-include src="'/partials/slider/' + slide.image + '.html'"></div>
Try using data-ng-include data-src:
<div ng-controller="sliderCtrl">
<div ng-repeat="slide in slides">
<div data-ng-include data-src="'/partials/slider/{{slide.image}}.html'"></div>
</div>
</div>
You forgot to escape the inner quotes:
<div ng-controller="sliderCtrl">
<div ng-repeat="slide in slides">
<div ng-include src="\'/partials/slider/{{slide.image}}.html\'"></div>
</div>
</div>
I trying to use instafeed.js for my local site. But I don't understand why images from my account don't show?
My code
Connected instafeed.js and file where I write the script
<script type="text/javascript" src="js/instafeed.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
Section for images
<section class="instagram-wrap">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="instagram-content">
<h3>Latest Photos</h3>
<div class="row photos-wrap">
<div id="inst"></div>
</div>
</div>
</div>
</div>
</div>
</section>
and app.js with instafeed value
$(function() {
var feed = new Instafeed({
get: 'user',
userId: ID,
accessToken: 'Token',
target: 'inst',
links: true,
limit: 8,
useHttp: true,
sortBy: 'most-recent',
resolution: 'standard_resolution',
template: '<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="photo-box">
<div class="image-wrap">
<img src="http:{{image}}"/>
</div>
<div class="description">{{caption}} </div>
</div>
</div>'
});
feed.run();
});
Your code works except for this error regarding your template definition:
SyntaxError: unterminated string literal
Put all the template in one line or use \ at the end of each line to have a multi-line string literal.
Try write the template parameter inline like this:
template: '<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><div class="photo-box"><div class="image-wrap"><img src="http:{{image}}"/></div><div class="description">{{caption}} </div></div></div>'
or on line break insert \