>

이 HTML 구조를 가지고 있다고합시다 :

<body ng-app="demo" ng-controller="RootCtrl">
    <header>
        <!-- Header Material -->
    </header>
    <main ng-controller="MainCtrl">
        <!-- Main Content -->
        <nav ng-controller="NavCtrl">
            <!-- Navbar -->
        </nav>
    </main>
<body>

이제 NavCtrl 를 가정 해 봅시다.   RootCtrl 에서 존재하는 모델을 조작해야 함 의 범위- $emit/$on 조건  더 적합합니까? 그리고 어떤 조건에서 스코프 상속을 통해 모델을 직접 조작하는 것이 더 좋을까요?

  • 답변 # 1

    원형 상속을 사용하는 경우 부모 및 자식 컨트롤러에서 동일한 변수 이름을 사용할 때 오류가 발생하기 쉬우므로주의해야합니다. $scope 변수가 항상 어딘가에 '점을 갖도록'함으로써이를 피할 수 있지만 항상 그렇게하려면 훈련이 필요합니다. $scope.$parent.$parent 를 사용하여 RootCtrl에 설정된 NavCtrl의 변수에 액세스 할 수도 있습니다.  구조, 그러나 이것은 취하기 쉽고 본질적으로 컨트롤러를 DOM 구조에 연결합니다.이 구조는 문제를 해결하는 데 도움이됩니다.

    $emit/$on은 이벤트 이름에 오타가 있으면 자동으로 실패하는 문제가 있으며 오류가 발생했을 때 발생하는 상황을 따르기가 어려울 수 있습니다. 아껴서 사용하는 것이 좋습니다. http://eburley.github.io/2013/01/31/angularjs-watch-pub-sub-best-practices.html은 "여러 가입자에게 이벤트에 대해 알리고 가입자에게 정보를 자신의 시각에 발산하는 것 이상을 수행해야합니다. "

    컨트롤러간에 데이터 모델을 공유하는 일반적인 Angular 방법은 서비스를 만들고 대신 두 컨트롤러에 모두 주입하는 것입니다. 이것은 일반적으로 OOP의 "상속 구성보다 선호"원칙에도 적합합니다.

    app.service('dayService', function () {      
        var day = 'Monday';
        return {
            getDay: function() {
               return day;
            },
            setDay: function(thisDay) {
               day = thisDay;
            }
        };
    })
    function NavCtrl($scope, dayService) {
        $scope.day = dayService.getDay();
    }
    function RootCtrl($scope, dayService) {
        dayService.setDay('Sunday');
    }
    
    

    HTML :

    <nav ng-controller="NavCtrl">
        Today is {{day}}
    </nav>
    
    

    앵귤러 모범 사례에 관한 Misko의 비디오는 흥미로울 수 있습니다. 28 분 정도에 컨트롤러와 서비스에 무엇을 넣을 것인지, 끝까지 이벤트 ($emit/$on)에 대해 더 많이 이야기합니다. 그의 결론 (낙서)은 사건이 두 가지가 실제로 서로에 대해 알 필요가없고 매우 분리 된 상태를 유지해야하거나 상황이 항상 필요하지 않은 경우 때때로 무시 될 수있는 상황에서만 사용하기에 다소 문제가 많다는 것입니다.

    기본 규칙은 다음과 같습니다.

    두 컨트롤러간에 데이터를 공유하기 위해 서비스를 사용하십시오. 상속보다 약간 복잡하지만 너무 어렵지는 않습니다.

    복잡한 방식으로 여러 구독자간에 공유하기 위해 이벤트를 사용하십시오.

    컨트롤러의

    $scope는 '쓰기 전용'이어야합니다 (위의 Misko 모범 사례 비디오에서 직접 가져온 규칙). "NavCtrl이 RootCtrl의 범위 아래에 존재하는 모델을 조작해야하는"범위 상속에는 상위 범위도 읽어야하므로 피하는 것이 가장 좋습니다.

  • 답변 # 2

    RootCtrl의 모델이 객체이고 NavCtrl이 모델 객체의 속성을 거의 수정하지 않으면 범위 상속을 사용하는 것이 가장 쉽습니다. 이 방법을 사용하려면 프로토 타입이 어떻게 작동하는지 알아야합니다.

    mikel의 답변에서 언급했듯이 서비스를 사용하여 컨트롤러간에 데이터를 공유하는 것은 효과적이지만, 특히 범위 상속이 가능한 경우 간단한 설정에서는 설정이 너무 과도합니다. 또한 서비스는 앱의 전체 수명주기에 존재하므로 원하거나 필요로하지 않을 수 있습니다.

    IMHO, $emit/$on은 귀하의 경우 상당히 잘 작동합니다. 설치가 너무 무겁지 않고 범위가 훌륭하게 분리되었으며 모델의 모든 수정 사항이 RootCtrl에 집중되어있어 유지 관리에 좋습니다. 이벤트 이름을 입력 할 때 발생할 수있는 실수에 대해 우려되는 경우 module.constant() 를 사용하여 이벤트 이름에 대한 상수를 작성할 수 있습니다. 이벤트 이름을 항상 문자열로 입력하는 대신 상수를 사용하십시오.

관련 자료

  • 이전 javascript - 약속과 혼동 한 다음 기능
  • 다음 apache - DOS 공격으로 인해 Plesk Admin에 액세스 할 수없고 SSH를 통해 IP 주소를 차단합니까?