$ scope 외부에서 컬렉션에 액세스하기

Ok .. angular.js를 시도했습니다. 그것은 굉장합니다. 나는 감동. 나는 바인딩과 물건을 얻을 수있다. $ 범위 외부에서 내 데이터에 액세스해야하는 경우 어떻게해야합니까? 신호를 보내고 신호를 가로 채고 새 항목을 추가하거나 기존 항목을 수정해야하는 signalR 허브가 있다고 가정 해 보겠습니다. 어떻게해야합니까? 이 예제에서 나를 보여 주시겠습니까 click 핸들 $scope.twitterResult에 액세스 할 수 있습니까?

<script> 
    angular.module('Twitter', ['ngResource']) 

    function TwitterCtrl($scope, $resource){ 
     $scope.twitter = $resource('http://search.twitter.com/:action', 
     {action: 'search.json', q: 'obama', callback:'JSON_CALLBACK'}, 
     {get:{method:'JSONP'}}); 
     $scope.doSearch = function(){ 
     $scope.twitterResult = $scope.twitter.get(); 
     } 
    } 

    $(function(){ 
     $('#addItem').click(function(){ 
      // add a row to $scope.twitterResult 
     }); 
    }); 
</script> 

<body> 
    <div data-loading></div> 
    <div ng-controller='TwitterCtrl' ng-init="doSearch()"> 
     <ul> 
      <li ng-repeat='tweet in twitterResult.results'><p> {{tweet.text}}</p></li> 
     </ul> 
    </div> 
</body>

출처

2012-11-07 Agzam

#addItem의 클릭 기능을 바인드하는 함수는 지시문에 있어야합니다. 지시문에는 범위와 상호 작용하는 모든 종류의 방법이 있습니다. http://docs.angularjs.org/guide/directive를 참조하십시오. –

귀하의 경우에 "범위 외"가 의미하는 바를 명확하게 설명해 주시겠습니까? 'click' 핸들러를 추가하려고하는 요소를 볼 수 있도록 마크 업을 공유 할 수 있습니까? AngularJS 세계 (http://stackoverflow.com/a/10508731/1418796) 외부에서 $ scope 객체에 액세스하는 것이 가능하지만 종종 필요하지 않습니다 ... –

더 좋은 방법은 AngularJS와 서비스에 "신호 허브"를 포장하는 것입니다. using web sockets with AngularJS에 대한 블로그 게시물, 특히 "Socket.IO와 상호 작용"을 살펴보십시오.

는

왜 썼는가 :

$(function(){ 
    $('#addItem').click(function(){ 
     // add a row to $scope.twitterResult 
    }); 
});

그리고 단지 ng-click를 사용하지? 이것이 제 3 자 코드 또는 위젯입니까? 이 문제를 해결하기 위해 필자에게 조언하고 몇 가지 예제 코드를 작성하도록 노력하겠습니다.

이벤트 처리기를 등록해야 할 경우 directive을 통해 처리해야합니다. 그렇지 않은 경우 이러한 외부 각도 이벤트 바인딩의 수명주기를 관리하기 시작할 때 상황이 복잡해집니다.

출처

2012-11-08 05:57:20 btford

아니요, 실제로는 클릭과 아무 관련이 없습니다 ... 나는 단지 $ scope를 외부에서 어떻게 접근 할 수 있는지 알고 싶었습니다 ... 나는 당신의 게시물을 점검 할 것입니다 ... 감사합니다. – Agzam

-1

당신은 아마 이런 식으로 뭔가를 할 수있는,하지만 난 그게 좋은 생각인지 확실하지 않다 : 다른 언급

var myTwitterScope; 
angular.module('Twitter', ['ngResource']) 

function TwitterCtrl($scope, $resource){ 
    $scope.twitter = $resource('http://search.twitter.com/:action', 
    {action: 'search.json', q: 'obama', callback:'JSON_CALLBACK'}, 
    {get:{method:'JSONP'}}); 
    $scope.doSearch = function(){ 
     myTwitterScope = $scope; 
     $scope.twitterResult = $scope.twitter.get(); 
    } 
} 

$(function(){ 
    $('#addItem').click(function(){ 
     // add a row to $scope.twitterResult 
     myTwitterScope.twitterResult.push(...); // or however you would do this. 
    }); 
});

,이는 가장 깨끗한 해결책이 아니다.

출처

2012-11-07 23:01:27 Shmiddty

그러면 전역 변수를 유지해야합니다. 내가 볼 필요가있는 모든 컬렉션을 위해. 그게 옳은 길인지 모르겠습니다. – Agzam

그래, 나는 그것이 깨끗한 해결책이 아니라는 것에 동의하지만 더 좋은 해결책을 알기 위해서는 angularjs에 익숙하지 않다. – Shmiddty

그리고 이것은 자동으로 변경 사항에 대한보기를 알리지 않을 것입니다. 수정 : myTwitterScope. $ apply()를 호출 한 후 변경이 가능합니다! 저를위한 일 – Agzam

일반적인 대답은 외부에서 스코프를 단순히 엉망으로 다루는 것이 아닙니다.

하지만 귀하의 요구 사항은 정품입니다.

그래서 원하는대로하려면 범위 외부와 범위 자체 사이의 통신을 설정해야합니다.

가장 쉬운 방법은 $ 범위를 창으로 내보내고 그 범위를 혼란에 빠뜨리면서 외부에서 범위를 위반하는 것입니다. 당신은 절대로 이것을해서는 안됩니다. 용들이있어.

범위는 내부 상태를 유지해야합니다.

나는 angular에 정확히 익숙하지 않아요하지만 당신의 효과에 뭔가를 할 수 있습니다

function TwitterCtrl($scope, $resource) { 
    // ... 

    $('body').bind('newTweetsArrived', data) { 
     // data contains the new tweets 

     // the decision to accept or not new tweets is made within the control 
     if (in_the_mood_to_accept_new_tweets) { 
      // add new tweets to the $scope.twitterResult 
     } 

     // optionally notify other components that new tweets are accepted 
     // so that they can adjust or whatever 
     $('body').trigger('afterNewTweetsArrived'); 
    } 

} 

// you add new tweets by triggering global custom event 
$(function(){ 
    $('#addItem').click(function(){ 
     $('body').trigger('newTweetsArrived', { ...here_are_the_tweets... }); 
    }); 
});

출처

2012-11-07 23:15:02

이것은 영리합니다. – Shmiddty

감사합니다. 나는 거대한 웹 어플리케이션을하는 것이 어렵다는 것을 배웠다. 이렇게하면 커플 링이 크게 줄어 듭니다. –

$ scope 외부에서 컬렉션에 액세스하기

답변

관련 문제