지시어 범위를 분리하지만 ngModel에서 바인딩 보존

Question

ng-model을 사용하여 해당 값을 노출시키는 지침이 있습니다.

이 지시문에는 범위가 엉망인 내부 구성 요소가 있으므로 해당 범위를 격리해야하지만 여전히 외부 세계에 바인딩하는 것이 좋습니다.

어떻게하면 좋을까요?

이

는 지침입니다 : 당신이 볼 수 있듯이

angular.module('app', []).directive('myDirective', function() { 
    return { 
    restrict: 'E', 
    require: 'ngModel', 
    link: function(scope, element, attr, ngModel) { 
     // do stuff using ngModel controller 
    }, 
    replace: true, 
    template: '<div><input ng-model="userInput" /></div>' 
    }; 
}); 

<my-directive ng-model="prop"></my-directive> 

, 지시어의 값으로 prop을 노출해야하지만, <input ng-model="userInput"/>에 정의 된 부모 범위에 userInput을 노출해서는 안된다.

prop 만 부모 범위에서 사용할 수 있습니까?

Answer 1

일반적으로 ngModelController는 새 범위를 만들지 않는 지시문과 함께 사용하기위한 것입니다. 그것이 분리 범위에서 작동하도록 얻을 내가 찾은 유일한 방법은 분리 범위에 같은 이름을 사용하는 것입니다, 볼이에 대한 자세한 설명은

scope: { prop: '=ngModel' } // must use 'prop' here! 

내 SO 답변 : https://stackoverflow.com/a/14792601/215945

scope: true을 사용하여 지시문에서 새 범위를 만들도록 할 수도 있습니다. 이 경우 prop은 프리미티브가 아닌 객체 속성이어야합니다 (예 : ng-model='someObj.prop'). 이 접근법에 대해 더 알고 싶다면 https://stackoverflow.com/a/13060961/215945

을 입력하십시오. 이렇게하면 부모 범위에 영향을주지 않고 새 지시어 하위 범위에 고유 한 (새) 속성을 만들 수 있습니다. 음, 프로토 타입 상속이 다소 작동하는 방법을 알고 있어야합니다. 부모 범위에 정의 된 객체는 지시어 하위 범위에서 표시되고 변경 가능합니다. 부모 범위에 정의 된이 표시 될 수 있지만 부모 기본 값을 변경하려고하면 같은 이름의 부모 속성을 숨기거나 그만 두는 자식 속성을 만들게됩니다. 프로토 타입 상속에 대한 더 많은 정보는 here입니다.