AngularJS 1.5:组件获胜't加载http数据

AngularJS 1.5: Component won't load http data

本文关键字：加载 http 数据 组件 获胜 AngularJS      更新时间：2023-09-26

我正在尝试创建一个组件，该组件采用一个属性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对象，并且控制台中没有错误。

有人知道我在这里错过了什么吗？

**更新**

我已经解决了使用"网格集"代替"网格表"的拼写错误，并修复了每个文件中模型的重新初始化。

在得到一些关于作用域的建议后，我确实调整了gridTable.component.js控制器，以便在服务调用上使用绑定。您在更新后的代码中看到的是两个控制台日志，内部日志显示正确，外部日志显示为未定义。然而，奇怪的是，外部的一个首先出现在控制台中。有什么想法吗？

每次实例化应用程序时，如下所示：

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

您正在重写它。您需要用依赖项声明它一次，然后引用它，如：

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

传递一个参数将检索现有的角度。模块，而传递多个参数会创建一个新的角度。模块

检查此处

相关文章：