How to get window scrolling function to work in Angularjs

up vote
0
down vote

favorite

After searching at Stackoverflow for previous post, most solution those not solve my issue.

Am migrating from jquery to angularjs. I need to convert this three line of codes from jquery to angularjs

 $(window).scroll(function(){

var position = $(window).scrollTop();

var bottom = $(document).height() - $(window).height();

Here is the working code for jquery which alerts position and bottom values

<script>



        $(document).ready(function(){



            $(window).scroll(function(){



                var position = $(window).scrollTop();

                var bottom = $(document).height() - $(window).height();



alert(position);

alert(bottom);

                   if( position == bottom ){



                /*

                        $.ajax({

                            url: 'fetch_data.php',

                            type: 'post',

                            data: {row:20},

                            success: function(response){

                                $(".post:last").after(response).show().fadeIn("slow");

                            }

                        });

                   */

                }



            });



        });



        </script>

Here is my struggle with angularjs but cannot get it to work. Can someone help me

    <script>

        var fetch = angular.module('myapp', );



        fetch.controller('fetchCtrl', ['$scope', '$http','$window', function ($scope, $http, $window) {



angular.element($window).bind("scroll", function() {

var position = $(window).scrollTop();

var bottom = $(document).height() - $(window).height();



alert(position);

alert(bottom);





if( position == bottom ){

          /*

             $scope.getPosts = function(){



                $http({

                method: 'post',

                url: 'getData.php',

                data: {row:20}

                }).then(function successCallback(response) {

                $scope.posts = response.data;





                });

             }

*/



            }



});



        }]);



        </script>

asked Nov 11 at 21:56

jmarkatti

11018

Describe the problem. "It doesn't work" is not a problem statement. Tell us what the expected behavior should be. Tell us what the exact wording of the error message is, and which line of code is producing it. Put a brief summary of the problem in the title of your question.
– georgeawg
Nov 11 at 23:01

here below is the two line of codes that throws ReferenceError: $ is not defined at object. Please can you help me further Sir. .var position = $(window).scrollTop(); var bottom = $(document).height() - $(window).height();
– jmarkatti
Nov 12 at 6:00

Looks like a simple typo. $(window) should be $window.
– georgeawg
Nov 12 at 17:49

add a comment |

up vote
0
down vote

favorite

After searching at Stackoverflow for previous post, most solution those not solve my issue.

Am migrating from jquery to angularjs. I need to convert this three line of codes from jquery to angularjs

 $(window).scroll(function(){

var position = $(window).scrollTop();

var bottom = $(document).height() - $(window).height();

Here is the working code for jquery which alerts position and bottom values

<script>



        $(document).ready(function(){



            $(window).scroll(function(){



                var position = $(window).scrollTop();

                var bottom = $(document).height() - $(window).height();



alert(position);

alert(bottom);

                   if( position == bottom ){



                /*

                        $.ajax({

                            url: 'fetch_data.php',

                            type: 'post',

                            data: {row:20},

                            success: function(response){

                                $(".post:last").after(response).show().fadeIn("slow");

                            }

                        });

                   */

                }



            });



        });



        </script>

Here is my struggle with angularjs but cannot get it to work. Can someone help me

    <script>

        var fetch = angular.module('myapp', );



        fetch.controller('fetchCtrl', ['$scope', '$http','$window', function ($scope, $http, $window) {



angular.element($window).bind("scroll", function() {

var position = $(window).scrollTop();

var bottom = $(document).height() - $(window).height();



alert(position);

alert(bottom);





if( position == bottom ){

          /*

             $scope.getPosts = function(){



                $http({

                method: 'post',

                url: 'getData.php',

                data: {row:20}

                }).then(function successCallback(response) {

                $scope.posts = response.data;





                });

             }

*/



            }



});



        }]);



        </script>

asked Nov 11 at 21:56

jmarkatti

11018

Describe the problem. "It doesn't work" is not a problem statement. Tell us what the expected behavior should be. Tell us what the exact wording of the error message is, and which line of code is producing it. Put a brief summary of the problem in the title of your question.
– georgeawg
Nov 11 at 23:01

here below is the two line of codes that throws ReferenceError: $ is not defined at object. Please can you help me further Sir. .var position = $(window).scrollTop(); var bottom = $(document).height() - $(window).height();
– jmarkatti
Nov 12 at 6:00

Looks like a simple typo. $(window) should be $window.
– georgeawg
Nov 12 at 17:49

add a comment |

up vote
0
down vote

favorite

After searching at Stackoverflow for previous post, most solution those not solve my issue.

Am migrating from jquery to angularjs. I need to convert this three line of codes from jquery to angularjs

 $(window).scroll(function(){

var position = $(window).scrollTop();

var bottom = $(document).height() - $(window).height();

Here is the working code for jquery which alerts position and bottom values

<script>



        $(document).ready(function(){



            $(window).scroll(function(){



                var position = $(window).scrollTop();

                var bottom = $(document).height() - $(window).height();



alert(position);

alert(bottom);

                   if( position == bottom ){



                /*

                        $.ajax({

                            url: 'fetch_data.php',

                            type: 'post',

                            data: {row:20},

                            success: function(response){

                                $(".post:last").after(response).show().fadeIn("slow");

                            }

                        });

                   */

                }



            });



        });



        </script>

Here is my struggle with angularjs but cannot get it to work. Can someone help me

    <script>

        var fetch = angular.module('myapp', );



        fetch.controller('fetchCtrl', ['$scope', '$http','$window', function ($scope, $http, $window) {



angular.element($window).bind("scroll", function() {

var position = $(window).scrollTop();

var bottom = $(document).height() - $(window).height();



alert(position);

alert(bottom);





if( position == bottom ){

          /*

             $scope.getPosts = function(){



                $http({

                method: 'post',

                url: 'getData.php',

                data: {row:20}

                }).then(function successCallback(response) {

                $scope.posts = response.data;





                });

             }

*/



            }



});



        }]);



        </script>

asked Nov 11 at 21:56

jmarkatti

11018

After searching at Stackoverflow for previous post, most solution those not solve my issue.

Am migrating from jquery to angularjs. I need to convert this three line of codes from jquery to angularjs

 $(window).scroll(function(){

var position = $(window).scrollTop();

var bottom = $(document).height() - $(window).height();

Here is the working code for jquery which alerts position and bottom values

<script>



        $(document).ready(function(){



            $(window).scroll(function(){



                var position = $(window).scrollTop();

                var bottom = $(document).height() - $(window).height();



alert(position);

alert(bottom);

                   if( position == bottom ){



                /*

                        $.ajax({

                            url: 'fetch_data.php',

                            type: 'post',

                            data: {row:20},

                            success: function(response){

                                $(".post:last").after(response).show().fadeIn("slow");

                            }

                        });

                   */

                }



            });



        });



        </script>

Here is my struggle with angularjs but cannot get it to work. Can someone help me

    <script>

        var fetch = angular.module('myapp', );



        fetch.controller('fetchCtrl', ['$scope', '$http','$window', function ($scope, $http, $window) {



angular.element($window).bind("scroll", function() {

var position = $(window).scrollTop();

var bottom = $(document).height() - $(window).height();



alert(position);

alert(bottom);





if( position == bottom ){

          /*

             $scope.getPosts = function(){



                $http({

                method: 'post',

                url: 'getData.php',

                data: {row:20}

                }).then(function successCallback(response) {

                $scope.posts = response.data;





                });

             }

*/



            }



});



        }]);



        </script>

angularjs

asked Nov 11 at 21:56

jmarkatti

11018

asked Nov 11 at 21:56

jmarkatti

11018

asked Nov 11 at 21:56

jmarkatti

11018

asked Nov 11 at 21:56

jmarkatti

11018

asked Nov 11 at 21:56

jmarkatti

11018

Describe the problem. "It doesn't work" is not a problem statement. Tell us what the expected behavior should be. Tell us what the exact wording of the error message is, and which line of code is producing it. Put a brief summary of the problem in the title of your question.
– georgeawg
Nov 11 at 23:01

here below is the two line of codes that throws ReferenceError: $ is not defined at object. Please can you help me further Sir. .var position = $(window).scrollTop(); var bottom = $(document).height() - $(window).height();
– jmarkatti
Nov 12 at 6:00

Looks like a simple typo. $(window) should be $window.
– georgeawg
Nov 12 at 17:49

add a comment |

Describe the problem. "It doesn't work" is not a problem statement. Tell us what the expected behavior should be. Tell us what the exact wording of the error message is, and which line of code is producing it. Put a brief summary of the problem in the title of your question.
– georgeawg
Nov 11 at 23:01

here below is the two line of codes that throws ReferenceError: $ is not defined at object. Please can you help me further Sir. .var position = $(window).scrollTop(); var bottom = $(document).height() - $(window).height();
– jmarkatti
Nov 12 at 6:00

Looks like a simple typo. $(window) should be $window.
– georgeawg
Nov 12 at 17:49

Describe the problem. "It doesn't work" is not a problem statement. Tell us what the expected behavior should be. Tell us what the exact wording of the error message is, and which line of code is producing it. Put a brief summary of the problem in the title of your question.
– georgeawg
Nov 11 at 23:01

here below is the two line of codes that throws ReferenceError: $ is not defined at object. Please can you help me further Sir. .var position = $(window).scrollTop(); var bottom = $(document).height() - $(window).height();
– jmarkatti
Nov 12 at 6:00

Looks like a simple typo. $(window) should be $window.
– georgeawg
Nov 12 at 17:49

add a comment |

1 Answer
1

active

oldest

votes

up vote
0
down vote

accepted

Here the solution that works for me is to implement jquery before calling angular. see this solution links AngularJs element.height() not a function

Thanks

answered Nov 13 at 2:41

jmarkatti

11018

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53253646%2fhow-to-get-window-scrolling-function-to-work-in-angularjs%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
0
down vote

accepted

Here the solution that works for me is to implement jquery before calling angular. see this solution links AngularJs element.height() not a function

Thanks

answered Nov 13 at 2:41

jmarkatti

11018

add a comment |

up vote
0
down vote

accepted

Here the solution that works for me is to implement jquery before calling angular. see this solution links AngularJs element.height() not a function

Thanks

answered Nov 13 at 2:41

jmarkatti

11018

add a comment |

up vote
0
down vote

accepted

Here the solution that works for me is to implement jquery before calling angular. see this solution links AngularJs element.height() not a function

Thanks

answered Nov 13 at 2:41

jmarkatti

11018

Here the solution that works for me is to implement jquery before calling angular. see this solution links AngularJs element.height() not a function

Thanks

answered Nov 13 at 2:41

jmarkatti

11018

answered Nov 13 at 2:41

jmarkatti

11018

answered Nov 13 at 2:41

jmarkatti

11018

answered Nov 13 at 2:41

jmarkatti

11018

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ndtyjky