AngularJS 컨트롤러 상속

AngularJS 컨트롤러 상속

AngularJS에는 Angular Docs에서 설명한 바와 같이 DOM 기반의 컨트롤러 상속이 있습니다.

<div ng-controller="BaseController">
    <p>Base Controller Value: {{value}}</p>
    <button ng-click="updateValue()">Update In Base</button>
    <div ng-controller="DerivedController">
        <p>Derived Controller Value: {{value}}</p>
        <button ng-click="updateValue()">Update In Derived</button>
    </div>
</div>

범위 변수 "value"는 BaseController에만 있습니다.이를 바탕으로 BaseController 또는 DerivedController의 메서드로 값을 변경할 때 두 값을 모두 업데이트해야 합니다.그러나 개별 범위 변수만 업데이트됩니다.

다음은 같은 예를 보여 주는 바이올린입니다.http://jsfiddle.net/6df6S/1/

현재 범위의 직계 하위 및 직계 상위에게 전달하기 위한 수준 변경 방법

이를 구현하려면

$180.$watch

그것을 이용하거나 그런 관찰자를 이용하지 않고 이것을 할 수 있는 방법은 없을까?

편집 1:

$scope 사용.$watch 이것이 내가 말한 것이다.

$scope.$watch("value", function () {
   $scope.$broadcast("childChangeListener"); //Downwards to all children scopes
   $scope.$emit("parentChangeListener"); //Upwards to all parent scopes
});

이러한 메커니즘을 사용하지 않고 모든 범위에서 값이 업데이트되는 방법을 찾고 있었습니다.

여러 컨트롤러가 동일한 데이터에 액세스해야 하는 경우 서비스를 사용해야 합니다.범위 상속은 HTML을 쓰는 방법을 제한하기 때문에 신뢰하지 마십시오.예를 들어, DerivedController는 BaseController의 자녀로 하지 않기로 결정했습니다.

일반적으로 서비스는 퍼블릭 API를 제공하고 구현을 숨깁니다.이를 통해 내부 팩터를 재작성하는 것이 쉬워집니다.

HTML:

<div ng-controller="BaseController">
    <p>Base Controller Value: {{model.getValue()}}</p>
    <button ng-click="model.updateValue('Value updated from Base')">Update In Base</button>
    <div ng-controller="DerivedController">
        <p>Derived Controller Value: {{model.getValue()}}</p>
        <button ng-click="model.updateValue('Value updated from Derived')">Update In Derived</button>
    </div>
</div>

JavaScript:

app.factory('sharedModel', function () {
    // private stuff
    var model = {
        value: "initial Value"
    };
    // public API
    return {
        getValue:    function() { 
           return model.value; 
        },
        updateValue: function(value) {
           model.value = value;
        }
    };
});

function BaseController($scope, sharedModel) {
    $scope.model = sharedModel;
}

function DerivedController($scope, sharedModel) {
    $scope.model = sharedModel;
}

만지작거리다.

또한 컨트롤러 간의 공유에는 $rootScope를 사용하지 않는 것이 좋습니다.

바이올린의 제본은 범위 내 부동산에 직접 있습니다.필요한 상속은 범위의 개체에 대한 데이터 바인딩을 통해 달성할 수 있습니다.

http://jsfiddle.net/2Dtyq/

scope.shared = {}    
scope.shared.value = "Something"

뿐만 아니라

scope.value= "Something"

★★★★★★★★★★★★★★★★?
Derived Controller는 Base Controller를 사용합니다.
Derived Controller는 "value"를 선택합니다.따라서 부모 범위에서 얻은 속성에 계속 바인딩됩니다.
[ Update In Base ]버튼을 클릭하면 양쪽 바인딩에 반영됩니다.[ Update In Derived ]버튼을 클릭하면 Dervied Controller 범위에 "value"라는 새 속성이 생성됩니다.따라서 부모 값 속성에 대한 바인딩이 끊어집니다.기본 업데이트를 더 이상 클릭해도 두 번째 데이터 바인딩이 새로 고쳐지지 않습니다.
이 속성을 다른 개체에 넣으면 새 속성이 생성되지 않으므로 상속이 계속 유지됩니다.

하위 컨트롤러에서 문자열 값을 직접 참조할 수 없습니다.프로토타입 상속으로 인해 속성 설정value하위 범위(하위 컨트롤러를 사용할 때 생성됨)에서는 상위 범위 속성을 업데이트하는 대신 하위 범위에 해당 속성이 생성됩니다.

고객님의 스코프는 모델이 아니기 때문에 환경오염을 피해야 합니다.$scope속성을 많이 가진 변수입니다.모델 객체를 만들고 그 위에 하위 특성을 만듭니다.이 오브젝트는 자 컨트롤러\스코프를 따라 전달할 수 있습니다.

위 사항을 설명하기 위해 당신의 jsfiddle을 수정했습니다.

또한 이 위키 페이지를 통해 프로토타입 상속의 미묘한 차이를 이해할 것을 강력히 권장합니다.

$broadcast 방법을 살펴보세요.문서 인용:

등록된 NG를 통지하는 모든 자 스코프(및 그 자 스코프)에 이벤트명을 아래쪽으로 디스패치 합니다.$rootScope($rootScope 。청취자의 스코프#$.

원시 값을 사용하는 대신 개체를 사용합니다.이 경우 다음과 같은 개체를 정의합니다.

$scope.obj = {"value":"base"}; 

시도합니다(obj.value).그건 작동할 것이다.

이는 ngController가 새로운 $scope를 작성하고 값 참조가 동일하지 않기 때문입니다.이 문제를 해결하려면$parent다음과 같은 속성:

<div ng-controller="BaseController">
    <p>Base Controller Value: {{value}}</p>
    <div ng-controller="DerivedController">
        <p>Derived Controller Value: {{$parent.value}}</p>
    </div>
</div>

Derived Controller에서는 다음과 같은 기능을 사용할 수 있습니다.$scope.$parent.value

그러나 이를 구현하기 위한 가장 좋은 방법은 다음과 같습니다.controllerAs구문을 사용합니다.

<div ng-controller="BaseController as BaseController ">
<p>Base Controller Value: {{BaseController.value}}</p>
<div ng-controller="DerivedController">
    <p>Derived Controller Value: {{BaseController.value}}</p>
</div>

Derived Controller에서는 다음과 같은 기능을 사용할 수 있습니다.$scope.BaseController.value

참조하고 있는 컨트롤러가 무엇인지 알고 있기 때문에, 코드의 가독성이 향상됩니다.자세한 내용은 ngController Docs 또는 ToddMoto의 Angular의 "Controller as" 구문을 참조하십시오.

언급URL : https://stackoverflow.com/questions/15386137/angularjs-controller-inheritance