새 지시선을 만들 때 자식 지시문이있는 부모가 작동하지 않습니다.

Question

주어진 URL에서 데이터를 검색 할 수있는 상위 지시문을 만들었습니다. 정상적으로 작동합니다.

<parent data="some/url/with/json/response"> 
    <child data="data[0]"></child> 
    <child data="data[1]"></child> 
    ... 
</parent> 

이것은 또한 잘 작동 : 두 번째 단계로, I는 다음과 같은 여러 자식 지시, 사이에 데이터를 배포합니다. 그러나 다른 지시문 그룹을 만들 때 상위 지시문이 새 범위를 만들지 않고 기본 범위의 모든 것을 덮어 쓰기 때문에 이전 데이터를 덮어 씁니다. 지시문에서 다음 줄 중 하나를 지정하는 경우, 데이터가 전혀 표시되지 않습니다 (지금은 오류 MSG가 나타납니다) : 여기

scope: true, 
//or 
scope: {}, 

결함이 상황의 plunker 예 : http://plnkr.co/edit/GWcLrhaUHNLPWNkOHIS8?p=preview 가 상단 부분은 "이 있어야한다 일하고있다 ".

그래서 질문입니다. 부모 지시어가 모든 자식 요소에 액세스 할 수있는 새 범위를 만드는 것을 어떻게 강제 할 수 있는지 알고 있습니까?

Answer 1

. plunker는 기본적으로 angular 1.2를 사용하여 스크립트를 만들었으므로이 솔루션을 더 빨리 찾지 못했습니다 (분명히 1.3.x에서만 작동 함). 이제 각각의 parent 지시문은 자체 범위를 작성하며, 자식도이 작업을 수행합니다. 그런 다음, ($의 부모)이 표기법을 사용하여 정확한 데이터가 표시됩니다

또한

<parent-bind-scope working=true> 
    Should be working: 
    <child-bind-scope data="$parent.working"></child-bind-scope> 
</parent-bind-scope> 

참조 : http://plnkr.co/edit/NkVxpjryD8YQm9xovw4M?p=preview

Remco의의 답변을 사용하고 어린이를위한 분리 된 범위를 만들 때, 나는 사용했다 $ parent. $ parent를 사용하면 동일한 결과를 얻을 수 있으므로이 솔루션에 큰 도움이되었습니다.

추가 : ng-repeat를 사용할 때 매우 이상합니다. 제 실제 코드에서는 이제해야합니다. $ parent. $ parent.이 같은 $ 부모가 작동하세요 :

//not the exact code 
<parent parentdata="/url/with/data"> 
    <div ng-repeat="i in $parent.range($parentdata.data.cols.length) track by $index"> 
     <child data1="$parent.$parent.$parent.parentdata.cols[$index]" 
       data2="$parent.$parent.$parent.parentdata.rows[$index]"/> 
    </div> 
</parent> 

Answer 2

사용 : 당신의 아이 범위에서

scope: false 

자식 요소의 부모 요소에서 범위를 유지하기.

true 또는 {}를 사용하는 것이 isolateScope 라 불리는 이유가 있습니다. 하위 범위를 보호합니다.

Answer 3

상위 지시문이 범위 (컨트롤러의 범위)를 상속하므로 모든 상위 지시문이 본질적으로 동일한 범위를 공유합니다. 두 부모가 같은 범위를 공유 할 때 마지막으로 실행되는 지시문 ("working"속성이없는 부모 지시문)은 공유 범위에서 'working'속성을 정의합니다.이 속성은 링크 구현에서 $ scope.working = "this 작동 안됨". $ scope.working가 할당되어있을 때 경고를 넣으면

<!-- bind object to child scope --> 
<parent-bind-scope working=true> 
    Should be working: 
    <child-bind-scope data="working"></child-bind-scope> 
</parent-bind-scope> 

<br> 

<parent-bind-scope> 
    Should not be working: 
    <child-bind-scope data="working"></child-bind-scope> 
</parent-bind-scope> 

, 당신은 (마지막 인의 다른 제어 흐름)는 경우 조건의 두 가지 실행되는 것을 볼 수 있습니다

controller: function($scope, $attrs) { 
    if($attrs.working) { 
    alert('working attribute exists'); 
    $scope.working = {key: 'this is working'}; 
    } else { 
    alert('working attribute does not exist'); 
    $scope.working = {key: 'this is not working'}; 
    } 

} 

Answer 4

자녀 지침에서는 다음과 같이 부모 범위에 문자열을 평가해야한다 : 나는 마침내 또한 좋은 보이는 해결책을 발견

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

app.controller('MainCtrl', function($scope) { 
    $scope.name = 'World'; 
}); 

app.directive('parentBindScope', function($timeout) { 
    return { 
    restrict: 'E', 
    transclude: true, 
    scope: true, 
    template: '<div ng-transclude></div>', 
    controller: function($scope, $attrs) { 
     if($attrs.working) { 
      $scope.working = {key: 'this is working'}; 
     } else { 
     $scope.working = { key: 'something else' } 
     $timeout(function(){ 
      $scope.working = {key: 'this is not working'}; 
     },1000) 

     } 

    } 
    } 
}); 

app.directive('childBindScope', function($parse) { 
    return { 
    restrict: 'E', 
    template: '<div>child-template: {{data}}</div>', 
    controller: function($scope, $attrs) { 
     $scope.$watch('$parent.' + $attrs.data, function() { 
     $scope.data = $scope.$parent.$eval($attrs.data); 
     }); 
    }, 
    link: function(scope, element, attrs) { 
     console.log('data: ' + JSON.stringify(scope.data)); 
    } 
    } 
})