2014-11-12 3 views
0

AngularJS에서 jQuery 코드를 불러오고 싶지만 어떻게 처리해야하는지 알기 힘듭니다. 나는 다음과 같은 jQuery 코드가있는 페이지를 아래로 스크롤 자동으로 시작하는 $scope.getData = getData;AngularJS에서 jQuery 코드를 호출하는 방법은 무엇입니까?

: 나중에이 같은 기능을 결합

// Controller code 
angular.module('application', []) 
    .controller('MyController', function($scope, $http) { 
     // Calling this will start refreshing/loading data 
     var getData = function() { 
      // Limit to 100 users 
      var apiUrl = "http://apilink.com"; //api link goes here 
      $http.get(apiUrl) 
       .success(function(data) { 
        var users = []; 

        angular.forEach(data, function(value) { 
          var user = { 
           // User info stored here... 
          }; 

          // Save the user to our list 
          users.push(user); 
        }); 

        $scope.users = users; 
        $scope.usersExist = (users.length > 0); 

        // I THINK THE SCROLL CODE NEEDS TO BE HERE BECAUSE $scope.users SHOULD BE BOUND TO THE VIEW NOW? 
       }) 
       .error(function(data) { 
        console.log(data); 
       }); 
     }; 
     ... 

: 여기 내 AngularJS와 코드의 추출물이다

$(document).ready(function() { 
var intervalTime = 30000; 

function initialise() { 
    // Scroll to top 
    $('html, body').animate({scrollTop : 0}, 800); 

    // And start scrolling to the bottom. Make it take 75% of the time to scroll to the bottom 
    // so it doesn't hit the bottom and automatically re-load 
    $("html, body").animate({ 
     scrollTop: $('html, body').get(0).scrollHeight 
    }, { 
     duration: (0.75 * intervalTime) 
    }); 

    $("html, body").bind("mousedown DOMMouseScroll mousewheel keyup", function() { 
     $('html, body').stop(); 
     console.log("Stopping due to event"); 
    }); 

    // Re-load data 
    angular.element('#MyController').scope().getData(); 
} 
... 

그러나 전체 화면이 스크롤되지 않는 것으로 나타났습니다. 그리고 나는 이것이 $http.get의 데이터가 jQuery 코드가 실행될 때 완전히 다운로드되거나 바운드되지 않았기 때문에 이것이라고 믿습니다.

그래서 코드에서 주석이있는 지점에서 AngularJS 컨트롤러의 jQuery 함수 initialise()을 호출하고 싶습니다.

Google 지시어 및 서비스가 있지만 jQuery 함수 호출과 관련하여 작동 방식을 파악할 수 없습니다.

+0

doc 준비가되지 않은 상태에서 함수를 넣으십시오. – Jai

+0

AngularJS를 사용할 때 JQuery AT ALL이 필요하지 않습니다. 귀하의 경우에는 'ngAnimate'를 사용할 수 있습니다. 문서를 확인하십시오. – Kutyel

+0

AngularJS 예제가 페이지의 특정 지점으로 스크롤 할 때 트리거되는 예제를 보았지만 60 초가 지나면 페이지가 자동으로 아래쪽으로 스크롤되도록하고 싶습니다. AngularJS에서 가능합니까? – b85411

답변

0

당신은 컨트롤러로 '초기화()'기능을 이동하고 해당 범위에 첨부 할 수 있습니다 (

$scope.initialise = function() {..etc 

그런 다음 당신은 당신이

$의 scope.initialise를 원하는 초기화 함수를 호출 할 수 있습니다);

그러나 나는 당신이 각 기능을 사용하여 페이지를 스크롤하는 방법을 참조하는 것이 좋습니다 -

https://docs.angularjs.org/api/ng/service/ $ anchorScroll

를 참조 또한 당신은 '준비'더 이상 전화와 기능을로드 할 필요가 없습니다.

관련 문제