it-source

범위 true를 사용하여 Angular Directive에서 상위 범위를 업데이트할 수 있습니까?

criticalcode 2023. 2. 12. 17:59
반응형

범위 true를 사용하여 Angular Directive에서 상위 범위를 업데이트할 수 있습니까?

명령어로 부모 컨트롤러에서 스코프를 상속해야 합니다.반드시 false 범위를 벗어나고 싶지는 않습니다.또, 반드시 격리된 스코프를 사용하고 싶은 것은 아닙니다. 왜냐하면, 중요한 값을 올바르게 링크 하려면 많은 작업이 필요하기 때문입니다(부모 컨트롤러의 많은 값을 생각할 수 있습니다).

를 사용하는 것이 이치에 맞습니까?scope:true부모 스코프를 갱신하려면 어떻게 해야 합니까?

<div ng-controller="MyCtrl">
      Hello, {{name}}!
        <my-directive></my-directive>
</div>
var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.name = 'Dave';
}


myApp.directive('myDirective', function() {
    return {
        scope: true,
        restrict: 'EA',
        link: function(scope, elem, attrs) {
            scope.updateName = function(newName) {
                console.log('newName is: ' + newName);
                scope.name = newName;
            }
        },
        template: '<input ng-model="updatedName" placeholder="new name value"> <button ng-click="updateName(updatedName)">Update</button>'
    }
})

바이올린을 확인해 주세요.

@user1737909는 이미 SO 질문을 참조하여 읽었지만(Scope prototpal / AngularJs의 프로토타입 상속의 뉘앙스는 무엇입니까? 문제를 설명하고 다양한 수정 방법을 권장함), 일반적으로 SO에 대한 답변을 제공하려고 합니다.

따라서 바이올린이 작동하지 않는 이유는 원시 유형(예: 문자열, 숫자 또는 부울 유형)이 다음과 같이 기록될 때입니다.scope.name = newName-- "write"는 항상 로컬 스코프/개체로 이동합니다.즉, 자 스코프가 독자적인 스코프를 취득합니다.name같은 이름의 부모 속성을 음영으로 하는 속성.수정은 부모 범위에서 기본 유형이 아닌 개체를 사용하는 것입니다.그러면 하위 범위가 해당 개체에 대한 참조를 가져옵니다.개체 속성에 대한 쓰기(상위 또는 하위)는 해당 개체로 이동합니다.(자체 스코프는 독자적인 오브젝트를 취득하지 않습니다).

$scope.obj = {name: 'Dave'};

그 후 지시사항:

scope.obj.name = newName;

및 HTML:

Hello, {{obj.name}}!

fiddle

범위 상속은 하위 값을 설정하는 것이 아니라 상위 값을 설정하는 것입니다.

하는 대신에scope.name = newName하위 스코프에서 부모 스코프에 메서드를 추가합니다.이 경우 부모 스코프는 같은 작업을 수행하지만 하위 스코프에서 메서드를 호출합니다.자녀가 이 메서드를 상속받습니다.

링크 함수에서는 다음과 같이 상위 범위(글로벌 "$scope" 범위)에 씁니다.$parent.name = new Name;

언급URL : https://stackoverflow.com/questions/16845605/is-it-possible-to-update-parent-scope-from-angular-directive-with-scope-true

반응형