AngularJS 1.5: Компонент не загружает данные HTTP

Я пытаюсь создать компонент, который принимает атрибут src, предоставляющий источник некоторых данных JSON, и продолжает генерировать таблицу на основе этих данных.AngularJS 1.5: Компонент не загружает данные HTTP

Я создал следующие части этой головоломки, но по какой-то причине это не работает, и я не смог понять, почему.

index.html

<!DOCTYPE html> 
<html ng-app="TestApp"> 
<head> 
<script src="app/angular.min.js"></script> 
<script src="app/components/gridTable/gridTable.service.js"></script> 
<script src="app/components/gridTable/gridTable.component.js"></script> 
<script src="app/components/gridTable/gridTableRow.component.js"></script> 
</head> 
<body> 
    <gridTable src="app/data.json"></gridTable> 
</body> 
</html>

gridTable.component.js

var scripts = document.getElementsByTagName("script") 
var currentScriptPath = scripts[scripts.length-1].src; 

var app = angular.module('TestApp', []); 
app.component('gridTable', { 
    bindings: { 
     src: '@', 
     rows: '=' 
    }, 
    restrict: 'E', 
    controllerAs: "gridTable", 
    transclude: true, 
    controller: function(gridTableService) { 
     gridTableService.load(this.src).then(angular.bind(this,function(result){ 
      this.rows = gridTableService.getData(); 
      console.log(this.rows); 
     })); 
     console.log(this.rows); 
    }, 
    templateUrl: currentScriptPath.replace('gridTable.component.js', 'templates/gridTable.html') 
});

gridTableRow.component.js

var scripts = document.getElementsByTagName("script") 
var currentScriptPath = scripts[scripts.length-1].src; 

var app = angular.module('TestApp'); 
app.component('gridTableRow', { 
    bindings: {   
     rows: '=' 
    }, 
    restrict: 'E', 
    controllerAs: "gridTableRow", 
    transclude: true, 
    controller: function() {   
    }, 
    templateUrl: currentScriptPath.replace('gridTableRow.component.js', 'templates/gridTableRow.html') 
});

gridTable.service.js

var app = angular.module('TestApp'); 
app.service('gridTableService', function($http) { 
    var _data = {}; 
    this.load = function(src) { 
     return $http({ 
      url: src, 
      method: 'GET' 
     }).success(function(data) { 
      _data = data; 
      return _data; 
     }); 
    } 
    this.getData = function(){ 
     return _data; 
    } 
});

gridTable.html

<table> 
    <tbody> 
     <grid-table-row rows="gridTable.rows"></grid-table-row> 
    </tbody> 
</table>

gridTableRow.html

<tr ng-repeat="row in gridTableRow.rows"> 
    <td ng-repeat="cell in row.cells"> 
    {{cell.value}} 
    </td> 
</tr>

ТЕСТ JSON

[ 
    { 
    rowIndex: 1, 
    cells: [ 
     { 
      value: "aaa" 
     }, 
     { 
      value: "aaa" 
     }, 
     { 
      value: "aaa" 
     } 
    ] 
    }, 
    { 
    rowIndex: 2, 
    cells: [ 
     { 
      value: "aaa" 
     }, 
     { 
      value: "aaa" 
     }, 
     { 
      value: "aaa" 
     } 
    ] 
    } 
]

То, что я ожидаю увидеть, представляет собой таблицу с двумя рядами по три ячейки, каждая из которых содержит «aaa». Но то, что я на самом деле вижу, это просто пустая таблица, и если я заменил вызов {{cell.value}} в gridTableRow.html каким-то случайным текстом, он появится ровно один раз (одна ячейка одной строки). Вызов console.log в gridTable.component.js показывает правильный объект JSON и ошибок в консоли нет.

Есть ли у кого-нибудь идеи относительно того, что мне здесь не хватает?

** ОБНОВЛЕНИЕ **

Я есть адреса опечаток, где «gridlet» был использован вместо «gridTable» и констатировала Реинициализация модели в каждом из файлов.

После некоторого совета, который я получил относительно области действия, я настроил контроллер gridTable.component.js, чтобы использовать привязку при вызове службы. То, что вы видите в обновленном коде, - это два консольных журнала, внутренний - правильно, внешний - как неопределенный. Однако, как ни странно, внешний отображается первым в консоли. Есть идеи?

источник

2015-12-17 Jordan Steinberg

Вы '' gridTableService' и gridletService' в контроллере вашего компонента. Что он? – Phil

Также вы создаете свой модуль каждый раз, когда используете 'angular.module ('TestApp', [])'. Вы не хотите этого делать. Я настоятельно рекомендую один модуль для каждого компонента вместо одного модуля для всего. – Phil

Было несколько типов с «gridlet», и я исправил ссылки на TestApp, чтобы они только создавали экземпляр один раз. Я также добавил привязку к вызову службы в контроллере gridTable.component.js. Однако у меня такой же результат. –

Каждый раз, когда вы инстанцировании приложение, как это:

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

Вы перекрывая его. Вы должны объявить его один раз с зависимостями, а затем ссылаться на него нравится:

var app = angular.module('TestApp');

Передача один аргумент извлекает существующий угловой.Модуль, в то время как проходит более чем один аргумент создает новый angular.Module

Проверить here

источник

2015-12-17 01:31:16

AngularJS 1.5: Компонент не загружает данные HTTP

ответ

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