Databases
StackOverflow2013
Postsdbo
POjQuery Plugins Doesn't Work Well with Angularjs
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery Plugins Doesn't Work Well with Angularjs
    primarykey
    data
    text
    <p>i have used <strong>jQuery slider</strong> in my project in which i am loading images using angular. My current view looks like this;</p> <pre><code> &lt;div id="slides"&gt; &lt;div class="slides_container"&gt; &lt;a href="" data-ng-repeat="image in gallery"&gt; &lt;img data-ng-src="{{image.imageUrl}}" width="919" height="326" alt="" /&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>the controller;</p> <pre><code>blogApp.controller("HomeController", ['$scope', '$resource', function ($scope, $resource) { var basePath = '/api/', FrontGallery = $resource(basePath + 'gallery?culture=en-US'), $scope.gallery = FrontGallery.query(); }]); </code></pre> <p>And the jQuery slider code (to make it a slider. I'm using this plugin <a href="http://archive.slidesjs.com/">http://archive.slidesjs.com/</a>)</p> <pre><code>$(document).ready(function () { $('#slides').slides({ preload: true, preloadImage: '/content/images/theme/loading.gif', play: 5000, pause: 2500, hoverPause: true }); }); </code></pre> <p>When, i try this code, my all images are loaded from database (debugged it through firebug) <strong>but jQuery slider isn't applying the animation or sliding effect to it</strong> <br /> And when i remove the <code>data-ng-repeat="image in gallery</code> and use Some static content i.e images, i get the sliding effect back.<br /> What's the problem here. I think Angular is manipulating some how my DOM. That's why i'm getting this problem whenever i put i.e use some angular attributes on my slider. <br /> <strong>Note:</strong> i have the same issue with jQuery news i.e jQuery <code>InnerFade</code> plugin <a href="http://medienfreunde.com/lab/innerfade/">http://medienfreunde.com/lab/innerfade/</a> <br /> Here is how the <code>innerFade</code> is used;</p> <pre><code>&lt;h1&gt; &lt;img src="/content/images/theme/hotnews.png" alt="" /&gt;Hot News&lt;/h1&gt; &lt;ul id="news"&gt; &lt;li class="ng-repeat:headline in news"&gt; &lt;span class="ng-bind:headline.description"&gt;&lt;/span&gt; &lt;a href="#" title="Read More"&gt;» more&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre> <p>and the controller;</p> <pre><code>var HotNews = $resource(basePath + 'article/hotnews?culture=en-US'); $scope.news = HotNews.query(); </code></pre> <p><strong>How do i fix these problems?</strong><br /> <strong>Update 2:</strong> Here is my routes;</p> <pre><code>// declare a module var blogApp = angular .module('blogApp', ['ngResource', 'ngSanitize']) .config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) { //$locationProvider.html5Mode(true); //configure the routes $routeProvider .when('/', { // list the home page templateUrl: "tmpl/home.html", controller: "HomeController" }) .when('/article/:id', { // access custom param foo: "hello world", // list the home page templateUrl: "tmpl/article.html", controller: "ArticleController" }) .when('/404', { template: '&lt;h1&gt;404 Not Found!&lt;/h1&gt;' }) .otherwise({ redirectTo: '/404' }); }]); </code></pre> <p><strong>Solution #1:</strong> Temporary, (As <strong>@Jason Goemaat</strong> answered) works for me. So, here is what i have done. I didn't create any <code>directive</code> but straightly i injected the <code>$timeout</code> to my controller and then i did the following;</p> <pre><code>$timeout(function () { jQuery('#news').innerfade({ animationtype: 'slide', speed: 750, timeout: 2000, type: 'random', containerheight: '1em' }); jQuery('#slides').slides({ preload: true, preloadImage: 'image/theme/loading.gif', play: 5000, pause: 2500, hoverPause: true }); }, 100); </code></pre> <p>And it did work for both i.e for <code>Slider</code> and for <code>InnerFade</code></p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USDotNet Dreamer
    1. USDotNet Dreamer
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POjQuery Plugins Doesn't Work Well with Angularjs
      1. USPSR
      1. VTFavorite
    2. VO
      singulars
      1. POjQuery Plugins Doesn't Work Well with Angularjs
      1. USDotNet Dreamer
      1. VTBountyStart
    3. VO
      singulars
      1. POjQuery Plugins Doesn't Work Well with Angularjs
      1. This table or related slice is empty.
      1. VTUpMod
    1. COPlease provide a jsfiddle or similar, I would try to write a directive to fix that ;)
      singulars
      1. POjQuery Plugins Doesn't Work Well with Angularjs
      1. USGuillaume86
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload