StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<pre><code> $(document).ready(function () { </code></pre> <p>is firing before angular has loaded the content onto the page. The jQuery slider script should only be activated after angular has loaded the content. Part of the problem here is that angular does not provide a callback for <code>$digest</code> so you don't have an event to listen for. </p> <p>The content load -> event callback -> ui build, while common in jQuery and standard javascript thinking, its not part of the angular mentality. Luckily angular has an insanely powerful method for handling this problem.</p> <p>What you need is to turn the jQuery slideshow script into an angular <a href="http://docs.angularjs.org/guide/directive">directive</a>. Then it will become part of the angular process space and get instantiated as a part of the angular digest cycle.</p> <p>Something like </p> <pre><code> <div id="slides" my-slideshow > <div class="slides_container"> <a href="" data-ng-repeat="image in gallery"> <img data-ng-src="{{image.imageUrl}}" width="919" height="326" alt="" /> </a> </div> </div> </code></pre> <p>Good luck!</p> <hr> <p>Happy example time using innerfade (I have not tested this yet, will do ASAP). First your application must declare an angular module if it doesn't already. <code>ng-app="myModule"</code>. <a href="http://docs.angularjs.org/api/angular.module">http://docs.angularjs.org/api/angular.module</a></p> <p>(make sure your controller is attached as well!)</p> <p>Now you can declare a directive on that module. Which is super cool.</p> <pre><code>angular.module('myModule').directive("innerFade", function () { var res = { restrict : 'C', link : function (scope, element, attrs) { scope.$watch(attrs.innerFade, function(){ element.innerfade({ speed: 'slow', timeout: 1000, type: 'sequence', containerheight: '1.5em' }); }); } }; return res; }); </code></pre> <p>The way this works is pretty simple. The <code>$watch</code> function will monitor the part of scope containing your data. When that changes (including initialization), it will fire the <code>innerfade</code> jQuery function on the <code>element</code> with the directive. We are also passing 'C' to the restrict argument so this custom directive will be a class only directive (I noticed you seem to like that).</p> <pre><code> <ul class="inner-fade:innerData" > <li class="ng-repeat:fadeItem in innerData">{{fadeItem}}</li> </ul> </code></pre> <p>Now all you have to do is bind the data to <code>$scope.innerData</code> in your controller (bind it any way you like including ajax), and it will just work. You can even change the data on <code>$scope.innerData</code> and it will update with full jQuery glory.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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