Angular Code works in jsfiddle not in browser

Question

I copied the code from jsfiddle which works in fiddler but when I try to run the same code in my browser, I do not get the scroll event. there are no errors in the console. Here is the code which I copied from jsfiddle.

HTML file

<!DOCTYPE html>
<html>
<head>
<title>Angular Synchronous scroll</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<div class="wrapper" combine-horizontal-scrolls="horizontal-scroll">
    <div class="horizontal-scroll top"><div class="content"></div></div>
    <div class="horizontal-scroll bottom"><div class="content"></div></div>
</div>
</body>
</html>

JS file

  var myApp = angular.module('myApp',[]);
 myApp.directive('combineHorizontalScrolls', [function(){
    var scrollTop = 0;
    function combine(elements){
        elements.on('scroll', function(e){
            if(e.isTrigger){
                debugger;
                e.target.scrollTop = scrollTop;
            }else {
                scrollTop = e.target.scrollTop;
                elements.each(function (element) {
                    if( !this.isSameNode(e.target) ){
                        $(this).trigger('scroll');
                    }
                });
            }
        });
    }

    return {
        restrict: 'A',
        replace: false,
        compile: function(element, attrs){
            combine(element.find('.'+attrs.combineHorizontalScrolls));
        }
    };
}]);

CSS file

.top{
background: yellow;
height: 100px;
overflow-x: auto;
 }

.bottom{
background: red;
height: 100px;
overflow-x: auto;
}

.content{
width: 300%;
height: 100%;
}

I do not get any error, but the scroll event is not getting fired when I scroll. — Amr
– Amr, Commented May 21, 2015 at 6:53

Mark · Accepted Answer · 2015-05-21 06:52:36Z

2

Looks like you forgot to add ng-app to the body element

<body ng-app="myApp">

answered May 21, 2015 at 6:52

Mark

3,2714 gold badges34 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Phil Over a year ago

For OP, it's under "Fiddle Options / Body tag" in the sidebar menu

Amr Over a year ago

I have done the changes and updated the question. but still I am not able to get the scroll event.

Mark Over a year ago

I would suggest comparing your code to the output of the jsfiddle page: fiddle.jshell.net/gdjz6go5/show Looks like jquery is included there aswell

Amr Over a year ago

@Mark: I added the same jquery to my code and checked it again but still I am not able to get the scroll event.

Mark Over a year ago

Other possible differences: Source code includes version 1.0.1 of angular, your code includes v 1.3.15. The script in Jsfiddle is inserted below the dom, maybe place the script.js include to just above the body closing tag

|

Collectives™ on Stack Overflow

Angular Code works in jsfiddle not in browser

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related