2013-04-09 2 views
1

일부 항목에 목록이있는 모바일 애플리케이션에서 작업하고 있습니다. 목록을 새로 고치려면이 목록을 끌어 내려야합니다 (iScroll4를 사용하고 있습니다). 이제는 각도 이벤트 컨트롤러에 연결하여 API 호출을 호출하고 모델을 업데이트 할 수있게되었습니다. 내가 읽은 내용을 바탕으로각도로 맞춤 자바 스크립트 이벤트 바인딩

[..] //javascript code to detect the pulldown event 

function pullDownAction(){ 
    //I want to update the scope here 
} 

, 나는 각도 지침을 만들고 거기에서 이벤트를 호출해야합니다,하지만, 난 여전히 어디 위의 파악되지 않은 :

은 다음과 자바 스크립트는 기본적으로 될 때 코드 조각은 가야한다. 다음

function pullDownAction(){ 
    var $rootScope = angular.injector(['ng']).get('$rootScope'); 
    $rootScope.$apply(function(){ 
      $rootScope.$broadcast('updateInbox'); 
    }); 
}); 

및 컨트롤러에서 :

$scope.$on('updateInbox', function(){ 
    $http.get(apiUrl) 
     .success(function (data) { 
       $scope.model = data; 
     });   
}); 

하지만 '

는 나 또한 그렇게처럼 pullDownAction 함수 내에서 이벤트를 브로드 캐스팅 컨트롤러에서 듣고 시도 중요한 코드를 놓치고있어 코드가 제대로 작동하지 않을 수도 있습니다. 나는 각도가 너무 새롭기 때문에 지시어가 어떻게 작동하는지 실제로 알지 못했습니다.

답변

2

나는 그것이 링크 기능에서 이벤트에 대한 모든 자바 스크립트 코드를 넣어 작동했다 : 다음 바로 용기라는 풀다운에 속성을 넣어

app.directive('pullToRefresh', function() { 
return { 
    restrict: 'AC', 
    link: 
    function (scope, element, attr) { 
      //Code to detect when element is pulled goes here 

      function pullDownAction(){ 
       scope.$eval(attr.pulldown); 
      } 

, 그들은 지금 같은 범위에 액세스 할 수 . 내 요소는 다음과 같습니다.

<div class="pull-to-refresh" pulldown="update()"> 
    //Element to be "pull-to-refreshable" here 
</div> 

update()는 물론 원하는대로 할 수있는 기능입니다.

2

지시어의 링크 기능에서 iScroll4 플러그인을 설정하십시오. 귀하의 링크 기능 내에 pullDownAction()을 정의하십시오. 그런 다음 종료로 인해 범위에 액세스 할 수 있습니다. 당신이 you created new injector 때문에 작동하지 않았다 인젝터로 시도 무엇

app.directive('iscroll4Wrapper', function() { 
    return { 
     link: function(element, scope, attrs) { 
      var pullDownAction = function() { 
      // update scope here 
      } 
      $(??).iScroll4({ // I have no idea how to initialize this 
      onSomeEvent: function(...) { 
       pullDownAction(); 
       scope.$apply(); // or put this in pullDownAction() 
      } 
      }); 
     } 
    } 
} 

.

+0

나는 거의 당신이 묘사 한대로 작동하게 만들었고, 제 대답을보십시오! 감사 :) –

관련 문제