Idiomatic AngularJS modal

Question

저는 AngularJS와 잘 어울립니다. 그리고 저의 투쟁에서 저는 $ broadcast/$ emit을 과용했습니다. 과거 백본과 함께 작업 한이 서비스는 앵커리지 외부의 디커플링 된 구성 요소에 대한 표준 goto 인 pubSub의 자연스러운 대체품처럼 보입니다.

이 경우 네트워크 이벤트 및 사용자 입력에 대한 응답으로 모달 오버레이를 렌더링하려고합니다. 이 즉 - 나는 서로이 구성 요소의 가시성을 변경 가야하는 방법을

<div data-ng-controller="ModalCtrl" class="modal {{visibility}}"> 
    <h2 data-ng-bind="modal.title"></h2> 
</div> 

:

angular 
    .module("app.controllers") 
    .controller("MyCtrl", function ($scope, $rootScope, ModalCtrl) { 

     $scope.handleClick = function() { 
      // this: 
      $rootScope.$broadcast("modal", { 
       title: "ClickHandler", 
       visibility: "is-visible" 
      }); 

      // or this? modify scope directly 
      $rootScope.modal = { 
       title: "ClickHandler", 
       visibility: "is-visible" 
      }; 

      // or this? - assuming I can pass it in as a dependency 
      ModalCtrl.show({title: "ClickHandler}); 
     }; 

    }); 

Answer 1

을 MVW에서

angular 
    .module("app.controllers") 
    .controller("ModalCtrl", function ($scope, $rootScope) { 
     // or a directive? 
     $scope.modal = { 
      title: "", 
      visibility: "" 
     }; 
    }); 

이 포장 :의 내가이 있다고 가정 해 봅시다 Angular의 패턴, 분리 된 컨트롤러를 통신하는 방법을 찾는 것은 나쁜 습관입니다. ModalCtrl과 다른 컨트롤러에 주입 할 수있는 매개 서비스를 만들 수 있습니다.

예를 들어, ModalService을 소개하자 :

는

// Services 
angular 
    .module("app.services") 
    .factory("ModalService", function() { 
     var ModalService = { 
      modal: { 
       title: "", 
       visibility: "" 
      } 
     }; 
     return ModalService; 
    }); 

// Controllers, depending on services 
angular 
    .module("app.controllers", ["app.services"]) 
    .controller("ModalCtrl", function ($scope, ModalService) { 
     $scope.modal = ModalService.modal; 
    }); 
    .controller("MyCtrl", function ($scope, ModalService) { 
     $scope.handleClick = function() { 
      ModalService.modal.title = "ClickHandler"; 
      ModalService.modal.visibility = "is-visible"; 
     }; 
    }); 

이것은 간단한 그림입니다. 서비스가 구조체를 직접 노출하는 대신 함수를 노출하는 것이 더 좋음에 유의하십시오. 그것은 내 요점을 명확하게 설명하기 위해 구조를 폭로했다.