트랜스코프된 디렉티브의 부모 스코프 액세스

트랜스코프된 디렉티브의 부모 스코프 액세스

상위 지시문의 범위에 액세스하고 싶지만 올바른 설정 조합을 얻을 수 없습니다.이것이 가능하고 올바른 접근법입니까?

MyCtrl에 SOME_CONST(컨트롤 플로우를 통해 DOM 업데이트를 하는 데 도움이 되는 것)를 넣는 것은 피하고 싶다.

<div ng-controller="MyCtrl">
    <parent>
        <child></child>
    </parent>
</div>

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.obj = {prop:'foo'};
}

myApp.directive('parent', function() {
    return {
        scope: true,
        transclude: true,
        restrict: 'EA',
        template: '<div ng-transclude><h1>I\'m parent {{obj.prop}}<h1></div>',
        link: function(scope, elem, attrs) {
            scope.SOME_CONST = 'someConst';
        }
    }
});

myApp.directive('child', function() {
    return {
        restrict: 'EA',
        template: '<h1>I\'m child.... I want to access my parent\'s stuff, but I can\'t.  I can access MyCtrlScope though, see <b>{{obj.prop}}</b></h1> how can I access the <b>SOME_CONST</b> value in my parent\'s link function?  is this even a good idea? {{SOME_CONST}}.  I really don\'t want to put everything inside the MyCtrl',
    }
});

이 바이올린을 보세요.

감사해요.

와 함께transclude: true그리고.scope: true,그parentdirective를 지정하면 2개의 새로운 스코프가 생성됩니다.

스코프 004는scope: truescope 005의 결과입니다.transclude: true. 그 이후로child디렉티브는 새로운 스코프를 작성하지 않고 변환된 스코프 005를 사용합니다.그림에서 알 수 있듯이 스코프 005에서 스코프 004로의 경로는 없습니다($nextSibling의 반대 방향으로 가는 개인 속성 $$prevSibling을 제외합니다만, 이러한 경로는 사용하지 마십시오).

@joakimbl의 솔루션은 아마도 여기서 가장 좋은 방법일 것입니다만, 저는 부모 디렉티브의 컨트롤러에 API를 정의하는 것이 더 일반적이라고 생각합니다.this:

controller: function($scope) {
    $scope.SOME_CONST = 'someConst';
    this.getConst = function() {
       return $scope.SOME_CONST;
    }
}

그리고 나서child지시:

link:function(scope,element,attrs,parentCtrl){
    scope.SOME_CONST = parentCtrl.getConst();
},

이렇게 해서tabs그리고.pane지시문은 Angular의 홈 페이지("컴포넌트 작성 예시")에서 작동합니다.

일반적으로 디렉티브의 부모 스코프 변수에 액세스 하는 방법은 쌍방향 바인딩을 사용하는 것입니다(scope:{model:'=model'}- 지침 구성의 각도가이드 참조)를 참조하지만, 트랜슬루션을 사용하고 있기 때문에 그리 간단하지 않습니다.자녀 디렉티브가 항상 부모 디렉티브의 자녀일 경우 부모를 요구하도록 설정하여 자녀 링크 기능의 부모 컨트롤러에 액세스할 수 있습니다.

myApp.directive('parent', function() {
  return {
    scope: true,
    transclude: true,
    restrict: 'EA',
    template: '<div ng-transclude><h1>I\'m parent {{obj.prop}}<h1></div>',
    controller: function($scope) {
        $scope.SOME_CONST = 'someConst';
        this.SOME_CONST = $scope.SOME_CONST;
    }
  }
});

myApp.directive('child', function() {
  return {
    restrict: 'EA',
    require:'^parent',
    scope:true,
    link:function(scope,element,attrs,parentCtrl){
        scope.SOME_CONST = parentCtrl.SOME_CONST;
    },
    template: '<h1>I\'m child.... I want to access my parent\'s stuff, but I can\'t.  I can access MyCtrlScope though, see <b>{{obj.prop}}</b></h1> how can I access the <b>SOME_CONST</b> value in my parent\'s link function?  is this even a good idea? {{SOME_CONST}}.  I really don\'t want to put everything inside the MyCtrl',
  }
});

다음 업데이트를 참조하십시오.http://jsfiddle.net/uN2uv/

같은 문제를 안고 앵귤러 매뉴얼로 해결했습니다.

즉, 부모 디렉티브에 컨트롤러를 사용하고 자녀 디렉티브에 그 컨트롤러가 필요합니다.이렇게 하면 부모 속성을 얻을 수 있습니다.

https://docs.angularjs.org/guide/directive 의 「커뮤니케이션 디렉티브의 작성」의 장을 참조해 주세요.

컨트롤러를 사용하도록 바이올린을 변경했습니다.이제 상수에 접속할 수 있습니다.https://jsfiddle.net/bbrqdmt3/1/

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.obj = {prop:'foo'};
}

myApp.directive('parent', function() {
    return {
        scope: true,
        transclude: true,
        restrict: 'EA',
        template: '<div ng-transclude><h1>I\'m parent {{obj.prop}}<h1></div>',
        controller: function($scope) {
            this.getConst= function() {
                return 'someConst';
            }                        
        },
    }
});

myApp.directive('child', function() {
    return {
        restrict: 'EA',
        require : '^parent',
        link: function(scope, element, attrs, ctrl) {
            scope.value= ctrl.getConst();
        },
        template: '<h1>I\'m child.... I want to access my parent\'s stuff, but I can\'t.  I can access MyCtrlScope though, see <b>{{obj.prop}}</b></h1> how can I access the <b>SOME_CONST</b> value in my parent\'s link function?  is this even a good idea? {{value}}.  I really don\'t want to put everything inside the MyCtrl',
    }
});

컨트롤러 뒤의 링크 fn 인수에는 transclude fn이 있습니다.

myApp.directive('parent', function() {
  return {
    scope: true,
    transclude: true,
    restrict: 'EA',
    template: '<div><h1>I'm a parent header.</h1></div>',
    link: function (scope, el, attrs, ctrl, transclude) {

        transclude(scope, function (clone, scope) {
            element.append(clone); // <-- will transclude it's own scope
        });

    },
    controller: function($scope) {
        $scope.parent = {
            binding: 'I\'m a parent binding'
        };
    }
  }
});

myApp.directive('child', function() {
  return {
    restrict: 'EA',
    require:'^parent',
    scope:true,
    link:function(scope,element,attrs,parentCtrl){

    },
    template: '<div>{{parent.binding}}</div>' // <-- has access to parent's scope
  }
});

언급URL : https://stackoverflow.com/questions/16866749/access-parent-scope-in-transcluded-directive