angular wrapper #9

elgs · 2013-11-12T04:05:08Z

I have written a super simple angular wrapper directive. I think this might be helpful for angular guys.
angular.onscreen.js

(function () {
    angular.module('on-screen', []).directive('onScreen', function () {
        return {
            restrict: 'A',
            link: function (scope, el, attrs) {
                el.onScreen(scope.onScreen);
            }
        };
    });
})();

And here's how you use it:

<html data-ng-app="main-app">
...
<div on-screen="onScreen">I'm here!</div>
<script>
(function () {
    var app = angular.module('main-app', ['on-screen']);
    app.controller('main-control', function ($scope) {
        $scope.onScreen = {
            container: window,
            direction: 'vertical',
            doIn: function () {
                console.log('I am in.');
            },
            doOut: function () {
                console.log('I am out.');
            },
            tolerance: 0,
            throttle: 50,
            toggleClass: 'onScreen',
            lazyAttr: null,
            lazyPlaceholder: 'someImage.jpg',
            debug: false
        };
    });
})();
</script>
...
</html>

silvestreh · 2013-11-12T04:21:49Z

I'm sorry, but I'm unfamiliar with Angular. Is this something you wish to see implemented in the plugin? If so, feel free to fork it and improve it as much as you wish :-)

elgs · 2013-11-12T04:35:21Z

Thanks @silvestreh for the answer, and thank you for the awesome onscreen code. :-)

elgs closed this as completed Nov 12, 2013

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

angular wrapper #9

angular wrapper #9

elgs commented Nov 12, 2013

silvestreh commented Nov 12, 2013

elgs commented Nov 12, 2013

angular wrapper #9

angular wrapper #9

Comments

elgs commented Nov 12, 2013

silvestreh commented Nov 12, 2013

elgs commented Nov 12, 2013