부모의 범위에 액세스하는 사용자 지정 하위 지시문

부모의 범위에 액세스하는 사용자 지정 하위 지시문

내 각도에 두 가지 커스텀 디렉티브가 있습니다.JS 앱. 하나는 부모 역할을 하고 다른 하나는 자녀 역할을 합니다.하위 지시문에 있는 부모의 범위에 액세스하려고 합니다.하지만 원하는 출력을 얻을 수 없습니다.

<div ng-controller="CountryCtrl">
{{myName}}
    <div ng-controller="StateCtrl">
        <state nameofthestate="'Tamilnadu'">
            <city nameofthecity="'Chennai'"></city>
        </state>
    </div>
</div>

그리고 제 대본은

var app = angular.module("sampleApp",[]);
app.controller("CountryCtrl",function($scope){
    $scope.myName = "India";
});
app.controller("StateCtrl",function($scope){
});
app.directive("state",function(){return {
    restrict : 'E',
    transclude: true,
    scope : { myName  : '=nameofthestate'},
    template:"**   {{myName}} is inside {{$parent.myName}}<br/><ng-transclude></ng-transclude>"
}});
app.directive("city",function(){return {
    restrict : 'E',
    require:'^state',
    scope : { myName  : '=nameofthecity'},
    template:"****   {{myName}} is inside {{$parent.myName}} which is in {{$parent.$parent.myName }}<br/> "
}});

대응하는 JSFiddle은 https://jsbin.com/nozuri/edit?html,js,output에서 구할 수 있습니다.

제가 받고 있는 출력은

India
** Tamilnadu is inside India
**** Chennai is inside India which is in Tamilnadu

예상되는 출력은

India
** Tamilnadu is inside India
**** Chennai is inside Tamilnadu which is in India

내가 여기서 뭘 잘못하고 있는지 누가 가르쳐 줄 수 있나요?

city directive $parent는 state directive의 범위를 초월한 것입니다.

state directive의 트랜스코드된 범위는 컨트롤러인 $parent of state directive에 대해 상속되므로 $parent가 됩니다.MyName = 인도.

변환된 범위의 $parent는 state directive isolated scope(scope = {})이므로 $parent가 됩니다.$parent.MyName = Tamilnadu (각도 1.3 업데이트의 일부)

자세한 내용: AngularJS에서 커스텀 디렉티브 *scope* 내에서 부모 스코프에 액세스하려면 어떻게 해야 합니까?

transclude: true - 명령어는 새로운 "제외된" 하위 범위를 만듭니다. 이 범위는 원형적으로 상위 범위에서 상속됩니다.디렉티브에 의해서 격리 스코프도 작성되는 경우, 트랜스코프된 스코프와 격리 스코프는 형제입니다.각 범위의 $parent 속성은 동일한 부모 범위를 참조합니다.

각도 v1.3 업데이트:지시문이 분리 범위도 생성하는 경우 변환된 범위는 분리 범위의 하위 항목이 됩니다.트랜스코프된 스코프와 격리된 스코프는 더 이상 형제 스코프가 아닙니다.변환된 범위의 $parent 속성은 격리 범위를 참조합니다.

또한 매튜의 답변은 부모-자녀간 지시적 의사소통에 대해 옳다.

이거 괜찮으세요?이 답변에서 개작.

변환된 콘텐츠의 상위 요소에 쉽게 액세스할 수 있는 방법이 없으므로 상위 컨트롤러를 하위 요소에 삽입하여 해당 범위에 액세스합니다.

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

  app.controller("CountryCtrl",function($scope){
      $scope.myName = "India";
  });

  app.controller("StateCtrl",function($scope){
  });

  app.directive("state",function(){return {
      restrict : 'E',
      transclude: true,
      scope : { myName  : '=nameofthestate'},
      template:"**   {{myName}} is inside {{$parent.myName}}<br/><ng-transclude></ng-transclude>",
      controller: function ($scope) {
        this.getName = function () {
          return $scope.myName;
        }
      }
  }});

  app.directive("city",function(){return {
      restrict : 'E',
      require:'^state',
      scope : { myName  : '=nameofthecity'},
      template:"****   {{myName}} is inside {{parentName}} which is in {{$parent.myName }}<br/> ",
      link: function(scope, element, attrs, ctrl) {
        scope.parentName = ctrl.getName();
      }
  }});

각진 경우JS는 transclude를 검출하여 HTML을 템플릿 또는 templateUrl 콘텐츠로 대체하기 전에 복제합니다.그런 다음 ng-transclude가 발생하면 트랜스코프된 콘텐츠를 컴파일하지만 디렉티브의 분리된 범위가 아닌 부모 범위에 링크합니다.따라서 트랜스코프된 콘텐츠는 부모 컨트롤러와 그 콘텐츠에 계속 액세스할 수 있으며 디렉티브 HTML은 분리된 범위(또는 경우에 따라서는 새로운 범위)를 가집니다.

AngularJS의 가동 상태

내 지시사항을 확인해봐, 그건 많은 양조장과 함께 작동해.내가 한 일은 트랜슬레이트를 제거하고 패러멜을 요구하는 것이었다.지저분한 html은 신경 쓰지 말고 js를 보기만 하면 된다.:D

    CRM.directive('inputwv', function ($compile) {
    var getTemplate = function(contentType) {
        var template = '';

        switch(contentType) {
                case '3':
                    template = '<input type="number" ng-init="inputHide[$parent.$index][$index]=false" ng-blur="inputHide[$parent.$index][$index]=false" ng-Enterd="updateRecord(row[0], $parent.$index)" ng-Enteru="inputHide[$parent.$index][$index]=false" ng-model="row[$index]" ng-change="row[$index]" ng-value="row[$index]" ng-Right-Click="click(element, $index, $parent.$index )" ng-esc="inputHide[$parent.$index][$index]=false" style="cursor:cell;border-bottom:0px;width:100px">'
                    break;
                case '0':
                    template = '<input type="text" ng-init="inputHide[$parent.$index][$index]=false" ng-blur="inputHide[$parent.$index][$index]=false" ng-Enterd="updateRecord(row[0], $parent.$index)" ng-Enteru="inputHide[$parent.$index][$index]=false" ng-model="row[$index]" ng-change="row[$index]" ng-value="row[$index]" ng-Right-Click="click(element, $index, $parent.$index )" ng-esc="inputHide[$parent.$index][$index]=false" style="cursor:cell;border-bottom:0px">'
                    break;
                case '1':
                    template = '<input type="text" ng-init="inputHide[$parent.$index][$index]=false" ng-blur="inputHide[$parent.$index][$index]=false" ng-Enterd="updateRecord(row[0], $parent.$index)" ng-Enteru="inputHide[$parent.$index][$index]=false" ng-model="row[$index]" ng-change="row[$index]" ng-value="row[$index]" ng-Right-Click="click(element, $index, $parent.$index )" ng-esc="inputHide[$parent.$index][$index]=false" style="cursor:cell;border-bottom:0px">'
                    break;
                case '2':
                    template = '<textarea class="materialize-textarea teal-text" type="text" ng-init="inputHide[$parent.$index][$index]=false" ng-blur="inputHide[$parent.$index][$index]=false" ng-Enterd="updateRecord(row[0], $parent.$index)" ng-Enteru="inputHide[$parent.$index][$index]=false" ng-model="row[$index]" ng-change="row[$index]" ng-value="row[$index]" ng-Right-Click="click(element, $index, $parent.$index )" ng-esc="inputHide[$parent.$index][$index]=false" style="cursor:cell;border-bottom:0px">'
                    break;
                case '4':
                    template = '<input type="text" ng-init="inputHide[$parent.$index][$index]=false" ng-blur="inputHide[$parent.$index][$index]=false" ng-Enterd="updateRecord(row[0], $parent.$index)" ng-Enteru="inputHide[$parent.$index][$index]=false" ng-model="row[$index]" ng-change="row[$index]" ng-value="row[$index]" ng-Right-Click="click(element, $index, $parent.$index )" ng-esc="inputHide[$parent.$index][$index]=false" style="cursor:cell;border-bottom:0px">'
                    break;
                case '5':
                    template = '<input type="date" class="datepicker" ng-init="inputHide[$parent.$index][$index]=false" ng-blur="inputHide[$parent.$index][$index]=false" ng-Enterd="updateRecord(row[0], $parent.$index)" ng-Enteru="inputHide[$parent.$index][$index]=false" ng-model="row[$index]" ng-change="row[$index]" ng-value="row[$index]" ng-Right-Click="click(element, $index, $parent.$index )" ng-esc="inputHide[$parent.$index][$index]=false" style="cursor:cell;border-bottom:0px"><script type="text/javascript">$(\'.datepicker\').pickadate({selectMonths: true, selectYears: 15});</script>'
                    break;
                default:
                    template = '<textarea class="materialize-textarea teal-text" type="text" ng-init="inputHide[$parent.$index][$index]=false" ng-blur="inputHide[$parent.$index][$index]=false" ng-Enterd="updateRecord(row[0], $parent.$index)" ng-Enteru="inputHide[$parent.$index][$index]=false" ng-model="row[$index]" ng-change="row[$index]" ng-value="row[$index]" ng-Right-Click="click(element, $index, $parent.$index )" ng-esc="inputHide[$parent.$index][$index]=false" style="cursor:cell;border-bottom:0px">'
            }

        return template;
}

    var linker = function(scope, element, attrs) {
        element.html(getTemplate(attrs.typ)).show();

        $compile(element.contents())(scope);
    }

    return {
        restrict: "E",
        link: linker
    };
});

언급URL : https://stackoverflow.com/questions/31200906/custom-child-directive-accessing-scope-of-parent