중첩 요소 지시문은 상위 지시문 범위에 액세스 할 수 없습니다.

저는이 문제를 오랫동안 고심 해 왔으며이 문제를 해결하는 방법을 알 수 없습니다.중첩 요소 지시문은 상위 지시문 범위에 액세스 할 수 없습니다.

격자를 설명하는 열 지시문을 포함하는 격자 지시문을 만들려고하지만 열은 요소가 아니며 격자 지시문의 범위에서 선언 된 배열에 열을 추가합니다.

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

    .controller('myCtrl', function ($scope, $http) { 
    }) 
    .directive('mygrid', function() { 
     return { 
      restrict: "E", 
      scope: true, 
      compile: function ($scope) { 
       debugger; 
       $scope.Data = {}; 
       $scope.Data.currentPage = 1; 
       $scope.Data.rowsPerPage = 10; 
       $scope.Data.startPage = 1; 
       $scope.Data.endPage = 5; 
       $scope.Data.totalRecords = 0; 
       $scope.Data.tableData = {}; 
       $scope.Data.columns = []; 
      }, 
      replace: true, 
      templateUrl: 'mygrid.html', 
      transclude: true 
     }; 
    }) 
    .directive('column', function() { 
     return { 
      restrict: "E", 
      scope: true, 
      controller: function ($scope) { 
       debugger; 
       $scope.Data.columns.push({ 
        name: attrs.name 
       }); 

      } 
     }; 
    });

그리고 여기에 HTML 마크 업입니다 : : 또한

<body ng-app="myApp"> 
<div ng-controller="myCtrl"> 
    <input type="text" ng-model="filterGrid" /> 
    <mygrid> 
     <column name="id">ID</column> 
     <column name="name">Name</column> 
     <column name="type">Type</column> 
     <column name="created">Created</column> 
     <column name="updated">Updated</column> 
    </mygrid> 
</div>

, 당신이 할 수있는

나는이 문제를 설명하는 가장 좋은 방법은 코드를 볼 볼 생각 jsfiddle에서 실제 코드를 테스트하십시오 : http://jsfiddle.net/BarrCode/aNU5h/

컴파일을 시도했는데 c ontroller 및 link를 사용하지만 어떤 이유로 부모 모눈의 열은 정의되지 않습니다.

어떻게 해결할 수 있습니까?

편집 : 나는 그리드에는 myGrid 지침에서 교체 templateUrl, transclude를 제거하면 , 내가 열 지침의 범위를 얻을 수 있습니다.

감사

출처

2013-05-27 Imri Barr

이 모든 성공? –

그래, 이후 버전의 angularJS에서는 $ scope를 사용하여 부모 지시어를 얻을 수 있습니다. $$ childHead –

AngularJS의 이후 버전에서 $ scope. $$ childHead가 내가 원하는 것을 수행합니다.

아직 새로운 기능이지만 격리 된 범위의 지시어에서도 잘 작동합니다.

그래서 열에서 당신이 단지 수 지시문 :

$scope.$$childHead.Data.columns.push({ 
        name: attrs.name 
       });

그냥이 명령은 그리드의 컴파일 후에 실행되어 있는지 확인합니다. 컴파일, 링크, 컨트롤러 간 전환은로드 우선 순위가 다르기 때문에 가능합니다.

출처

2013-12-28 09:46:58

나는 당신이 일을하려고하지만, column 지시어를 사용중인 볼

아마 문제를 해결하는 가장 좋은 방법은 아닙니다.

사용자 지정 가능한 열을 사용하여 grid 지시문을 정의하려고합니다. 각 열에는 행 데이터의 값에 액세스 할 수있는 키와 표시 할 제목과 같은 2 개의 관련 정보가 있습니다.

모든 페이지 매김 관련 내용을 무시하면 여기에 문제에 접근하는 다른 방법이 있습니다. 우리의 HTML의 모습 있도록

이

는 첫째,하자 사용, 열 정보를 정의하는 속성 : 여기

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

그리고있어 다음 JS를 들어

<body ng-app='app' ng-controller='Main'> 
    <grid col-keys='id,name,type' 
      col-titles='ID,Name,Type' 
      rows='rows'> 
    </grid> 
</body>

, 우리는 분명히 app 모듈이 필요 grid 지시. 격리 범위를 사용하지만 = 양방향 바인딩을 사용하여 상위 범위에서 행 데이터를 가져옵니다. 링크 함수가 attrs 개체에서 열 정보를 가져 오는 방법에 유의하십시오.

템플릿은 매우 간단합니다. 열 제목을 반복하여 제목을 정의한 다음 rows을 반복하고 각 행에서 열 키를 반복합니다.

app.directive('grid', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      rows: '='    
     }, 
     link: function(scope, element, attrs) { 
      scope.colKeys = attrs.colKeys.split(','); 
      scope.colTitles = attrs.colTitles.split(','); 
     }, 
     replace: true, 
     template: 
      '<table>' + 
      ' <thead>' + 
      ' <tr>' + 
      '  <th ng-repeat="title in colTitles">{{title}}</th>' + 
      ' </tr>' + 
      ' </thead>' + 
      ' <tbody>' + 
      ' <tr ng-repeat="row in rows">' + 
      '  <td ng-repeat="key in colKeys">{{row[key]}}</td>' + 
      ' </tr>' + 
      ' </tbody>' + 
      '</table>' 
    }; 
});

시작하기위한 몇 가지 샘플 데이터.이므로

app.controller('Main', function($scope) { 
    $scope.rows = [ 
     {id: 1, name: 'First', type: 'adjective'}, 
     {id: 2, name: 'Secondly', type: 'adverb'}, 
     {id: 3, name: 'Three', type: 'noun'} 
    ]; 
});

Here it is in fiddle form.

출처

2013-05-27 16:40:54 satchmorun

설명을 주셔서 감사합니다. 그러나 원하는 경우 자신의 방식대로이 문제를 해결하기 위해 마크 업 방식을 사용하고 있습니다. 열 순서를 변경하거나 열을 더 많은 옵션을 추가하려면 그리드의 다른 특성을 통해 전달해야하고 결국 정말 길고 지저분 해 보일 것입니다. 마크 업 측면의 모든 작업을 단순화하고 지시문 측면에서 모든 노력을 다하고 있습니다. –

그 문제는 JS 값을 HTML로 인코딩하는 것이고 Angular를 사용하는 목표에 반하는 것입니다. 여기에 문자열을 사용하여 단순화했습니다. 'colKeys'와'colTitles'는'rows'와 같은 격리 범위를 통해 참조 될 수 있고 'long and messy'를 피하면서 부모 컨트롤러에서 정의 될 수 있습니다. – satchmorun

는 댓글 :

를 AngularJS와의 이후 버전에서는 내가 그것을 테스트하지 않았습니다 $scope.$$childHead

를 사용하여 부모 지시어를 얻을 수 있습니다.

출처

2013-12-26 06:32:51

중첩 요소 지시문은 상위 지시문 범위에 액세스 할 수 없습니다.

답변

관련 문제