2012-09-29 3 views
14

아래 시나리오에서 메시지를 전달하는 가장 좋은 방법은 무엇입니까?보기간에 개체 전달 (플래시 메시지)

$scope.p.$save의 성공 시나리오에서 결과에는 다음보기 ($location.path("/test/"+res.reply.Id))에 표시하려는 메시지 (res.message)가 포함되어 있습니다. AngularJS가 없으면 URL에 전달하거나 세션 쿠키에 저장할 수 있습니다. 그러나 브라우저 리디렉션이없고 상태를 사용할 수 있어야하므로 AngularJS에서 더 좋은 방법이있을 것으로 생각됩니다. 이것을 달성하는 가장 좋은 방법은 무엇입니까?

rootscope에 설정하면 브라우저의 뒤로 버튼을 사용하는 동안 표시되며 메시지의 범위는 새보기로의 첫 번째 탐색에만 사용해야합니다.

function NewCtrl(Phone, $location, $rootScope, $scope) { 
    $scope.p = new Phone(); 
    $scope.save = function() { 
     $scope.p.$save(
      {}, 
      function (res) { 
       $rootScope.message = res.message **//<-- this will cause message still set when using browser back button, etc** 
       $location.path("/test/"+res.reply.Id); **//<-- Req: needs to pass the message to next view** 
      }, function (res) { 
      //TODO 
      } 
     ); 
    }; 
} 
.... 
PhoneApp.factory('Phone', function ($resource) { 
    return $resource('/api/test/:_id') 
}); 

답변

16

$ routeChangeSuccess에 플래시를 표시하는 서비스를 사용할 수 있습니다.

플래시 메시지를 설정할 때마다 대기열에 메시지를 추가하고 경로가 변경되면 첫 번째 항목을 대기열에서 꺼내 현재 메시지로 설정합니다.

여기 데모입니다 : 내가 비슷한 기능을 구현하기 위해 찾고 있었다

http://plnkr.co/edit/3n8m1X?p=preview

+0

감사합니다. – bsr

+0

방금 ​​편집 했으므로 배열을 사용하여 여러 번 깜박임을 지원하는 ** 더 좋고 간단한 구현을 생각했습니다. –

+1

'$ routeChangeStart'도 고려해 볼 수 있습니다. 프로세스에 너무 늦게 불려지는 성공이 (때로는 설정에 따라) 새 페이지가 이미로드되어 경고 범위가 해결되었을 수 있기 때문입니다. –

0

나는이 기본을 AngularJS로하는 방법이 있다고 생각하지 않습니다. 최선의 방법은 쿼리 문자열을 통해 (인코딩 된) 메시지를 전달하는 것입니다.

5

하지만, 실제로 으르렁 스타일의 메시지를 더 원했다.

Andy가 toastr 울림 스타일 알림 라이브러리를 활용하는 '팝'방법을 포함하도록 제공 한 우수한 plinkr 코드를 업데이트했습니다.

또한 내 업데이트로 알림 유형 (정보, 경고, 성공, 오류) 및 제목을 지정할 수 있습니다.

'pop'메서드는 메시지를 대기열에 추가하는 것을 건너 뛰고 화면에서 즉시 팝업합니다. Andy의 이전 plinkr의 set/get 기능은 대부분 변경되지 않았습니다.

당신은 여기 내 업데이트를 찾을 수 있습니다 당신의 도움과 노력을 주셔서 대단히 http://plnkr.co/edit/MY2SXG?p=preview

+0

flash.set()에 전달하는 메시지 객체가 ngmodel 인 경우 참조로 전달되므로 큐의 여러 항목이 모두 복제본이됩니다. 동일한 개체의 즉, 다음과 같이하면 $ scope.msg = {제목 : '제목', 본문 : '메시지 본문', 입력 : '정보'}}; 는 자사의 모델로이를 사용하여 양식을 가지고 있고, 큐에 이미 어떤 종류의 메시지 큐의 목적을 패배 새 값을 ... 포함하도록 변경됩니다 설정에서이 범위 변수를 전달) –

+0

당신의 원래 예제는 toatr 라이브러리를로드하는 데 문제가있었습니다. 샘플을 업데이트하고 toastr 스크립트를 인라인에 포함 시켰습니다. http://plnkr.co/edit/vSWKtv?p=preview –

+0

감사합니다. 내가 쓴 이후 뭔가가 바뀌 었음에 틀림 없다. 이전에로드 중이었습니다 :) –