Директивы элементов вложения не могут получить доступ к объекту родительской директивы

Я довольно долго боролся с этим, и я не могу понять, как решить эту проблему.Директивы элементов вложения не могут получить доступ к объекту родительской директивы

Я пытаюсь создать директиву сетки, которая содержит директивы столбца для описания сетки, но столбцы не будут элементами и просто добавят столбцы в массив, объявленный в области директивы grid.

Я думаю, что лучший способ объяснить эту проблему, чтобы посмотреть просмотреть код:

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, но по какой-то причине столбцы родительской сетки не определены.

Как это исправить?

Edit: Когда я извлекаю заменить, templateUrl, transclude из mygrid директивы, я могу получить объем от директивы столбца.

Благодаря

источник

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 с настраиваемыми столбцами. Каждый столбец имеет две соответствующие части информации: ключ, с помощью которого можно получить доступ к значению в данных строки, и заголовок для отображения.

Игнорирование на данный момент всего материала, связанного с разбивкой на страницы, вот другой способ подойти к проблеме.

Во-первых, использование давайте атрибуты для определения информации о столбце, поэтому наш HTML будет выглядеть следующим образом:

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

Для JS, очевидно, нужен app модуль:

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

И вот grid директива. Он использует область изоляции, но использует привязку 2-way привязки =, чтобы получить данные строки из своей родительской области. Обратите внимание, как функция ссылки выводит информацию о столбце из объекта 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', и определяется в родительском контроллере, избегая« длинного и грязного ». – satchmorun

Как Имрия Комментарии:

В более поздних версиях AngularJS вы можете получить родительскую директиву с помощью $scope.$$childHead

я не проверял.

источник

2013-12-26 06:32:51

Директивы элементов вложения не могут получить доступ к объекту родительской директивы

ответ

Смежные вопросы