javascript - AngularJS: avoid using $timeout to wait for image loading completion -

-

i'm trying create own image carousel angularjs directive; want keep lightweight , unopinionated possibile, thought i'd create <carousel></carousel> wrapper set of <img> elements, so:

<carousel>    <img ng-repeat="image in images" ng-src="{{image.src}}" alt=""/> </carousel>

what directive create <div class="carousel"> element images transcluded. now, still haven't coded part images slide or fade in/out cause there's 1 issues i'd out of way first: want assign carousel , images therein same height (computed height of shortest image) avoid carousel changing height when taller image gets displayed, or avoid cropping image in case carousel had fixed height.

so jotted down this jsfiddle demonstrate, far best solution found compute heights of transcluded images relies on 2 nested $timeouts 100-ms delay. looks me more hack anything.
wondering if there's "proper" way accomplish in angularjs. cheers.

p.s. on side note, dislike fetching root element of directive's template, <div class="carousel"> in case, using element.children()... there no easy way reference in angularjs? looked around no dice.

you need write 1 more directive intimate angular code ng-repeat rendered img tags on add listener event set height , width of element on load of image.

directive

.directive("carousel", ["$timeout", function ($timeout) {     return {         restrict: "e",         transclude: true,         template: "<div class=\"carousel\" ng-transclude></div>",         link: function (scope, element, attrs) {             var div = element.children();             scope.$on('ngrepeatdone', function () {                 element.find('img').on('load', function () {                     var images = div.children();                     var minheight = math.min.apply(null, _.pluck(images, "height"));                     angular.foreach([div, images], function (e) {                         e.css({                             height: minheight + "px"                         });                     });                     scope.$apply();                 });             });         }     } }])

ngrepeatedone

.directive('mypostrepeatdirective', function () {     return function (scope, element, attrs) {         if (scope.$last) {             scope.$emit('ngrepeatdone')         }     }; });

demo jsfiddle


Comments

Post a Comment

Popular posts from this blog

Java 3D LWJGL collision -

-
i making 3d java game lwjgl library, , wondering how add collision detection, player not go through models. i using obj models. here objloader class, loads models: package renderengine; import java.io.bufferedreader; import java.io.file; import java.io.filenotfoundexception; import java.io.filereader; import java.util.arraylist; import java.util.list; import models.rawmodel; import org.lwjgl.util.vector.vector2f; import org.lwjgl.util.vector.vector3f; public class objloader { public static rawmodel loadobjmodel(string filename, loader loader){ filereader fr = null; try { fr = new filereader(new file("res/"+filename+".obj")); } catch (filenotfoundexception e) { system.err.println("couldn't load file!"); e.printstacktrace(); } bufferedreader reader = new bufferedreader(fr); string line; list<vector3f> vertices = new arraylist<vector3f...
Read more

spring - SubProtocolWebSocketHandler - No handlers -

-
i have ugly error during deploying spring app on jboss. 18:11:16,025 error [org.apache.catalina.core.containerbase.[jboss.web].[default-host].[/consumer]] (msc service thread 1-7) exception sending context initialized event listener instance of class org.springframework.web.context.contextloaderlistener: org.springframework.context.applicationcontextexception: failed start bean 'subprotocolwebsockethandler'; nested exception java.lang.illegalargumentexception: no handlers @ org.springframework.context.support.defaultlifecycleprocessor.dostart(defaultlifecycleprocessor.java:176) [spring-context-4.1.3.release.jar:4.1.3.release] @ org.springframework.context.support.defaultlifecycleprocessor.access$200(defaultlifecycleprocessor.java:51) [spring-context-4.1.3.release.jar:4.1.3.release] @ org.springframework.context.support.defaultlifecycleprocessor$lifecyclegroup.start(defaultlifecycleprocessor.java:346) [spring-context-4.1.3.release.jar:4.1.3.release] @ org.s...
Read more

methods - python can't use function in submodule -

-
my folder structure this: pythonstuff/ program.py modulea/ __init__.py foo.py bar.py here's code bar.py : def hello(): print("hello, world!") here's code program.py : #!/usr/bin/env python3 modulea import bar bar.hello() i run $ python3 program.py somehow error: file "program.py", line 3, in <module> bar.hello() attributeerror: 'module' object has no attribute 'hello' edit: __init__.py file empty. edit2: after trying realized had bar.py in root directory contained hello() method. bar.py in modulea/ directory empty. add it import os __all__ = [] module in os.listdir(os.path.dirname(__file__)): if module != '__init__.py' , module[-3:] == '.py': __all__.append(module[:-3]) the init .py files required make python treat directories containing packages; done prevent directories common name, such string, unintentionally hiding v...
Read more