AngularJS 1.5：組件不會加載http數據

Question

我正在嘗試創建一個帶有屬性src的組件，該組件提供一些JSON數據的源，並繼續基於該數據生成表。

我創建了此難題的以下幾部分，但由於某種原因，它似乎不起作用，我也無法弄清原因。

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”。 但是我實際看到的只是一個空白表，如果我用一些隨機文本替換對gridTableRow.html中的{{cell.value}}的調用，它將顯示一次（一行一行）。 gridTable.component.js中的console.log調用確實顯示了正確的JSON對象，並且控制台中沒有錯誤。

有誰知道我在這里缺少什么嗎？

** 更新 **

我已經解決了使用“ gridlet”代替“ gridTable”的錯別字，並修復了每個文件中模型的重新初始化。

在獲得有關范圍的一些建議之后，我確實調整了gridTable.component.js控制器以在服務調用上使用綁定。 您在更新的代碼中看到的是兩個控制台日志，內部的一個顯示正確，外部的顯示為未定義。 但是，很奇怪的是，外部控制台首先出現在控制台中。 有任何想法嗎？

Answer 1

每次您像這樣實例化應用程序時：

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

您正在覆蓋它。 您需要使用依賴項聲明一次，然后像這樣引用它：

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

傳遞一個參數將檢索現有的angular.Module，而傳遞多個參數將創建一個新的angular.Module

在這里檢查

AngularJS 1.5：組件不會加載http數據

問題描述

1 個解決方案

解決方案1
1 2015-12-17 01:31:16

AngularJS 1.5：組件不會加載http數據

問題描述

1 個解決方案

解決方案1 1 2015-12-17 01:31:16

解決方案1
1 2015-12-17 01:31:16