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>

TEST 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

检查here

AngularJS 1.5：组件不会加载http数据

1 个答案: