Question

我想在桌面下绘制tableRow.html但是ng-repeat根本没有绘制，示例在桌面上方。如果我将带有示例的行直接放入index.html中的正确位置，它将绘制得很好。我究竟做错了什么？的index.html

<html>
<head>
    <title>Currency Exchange</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="css/stylesheet.css"/>
    <script type="text/javascript" src="js/angular.min.js"></script>

</head>
<body ng-app="myApp">
    <h1>A title to the table</h1>
    <div>
        <div class= "ExTableDiv">
            <table class= "ExTable">
            <thead>
                <tr>
                    <th class="column">Currency Code</th>
                    <th class="column">Currency Name</th>
                    <th class="column">Exchange Rate vs USD</th>
                </tr>
            </thead>
            <tbody ng-controller="TestController"><!--**if you try TestController as TC it will throw an error, why?**-->
                <test-directive></test-directive>
            </tbody>
            </table>
        </div>
    </div>
</body>
    <script type="text/javascript" src="js/app.js"></script>
    <script type="text/javascript" src="js/directives/tableFiller.js"></script>
</html>

app.js

(function(){
var app = angular.module('myApp',['exchange-directives']);

app.controller('TestController', ['$http', function($http) {
var table = this;
table.rows = [];
$http.get('/item.json').success(function(data){
    table.rows = [{"name":"Captain","rate":"0.8910","inverce":"1.1223"}]; //I added this here so I know I am getting json data
});
}]);
})();

tableFiller.js

(function(){
var app = angular.module('exchange-directives', []);

app.directive('testDirective', function(){
    return {
        restrict: 'E',
        templateUrl: 'js/directives/tableRow.html'
    };
});
})();

tableRow.html

<tr ng-repeat='row in TestController.table.rows'>
<td>{{row.name}}</td>
<td>{{row.rate}}</td>
<td>{{row.inverse}}</td>
</tr>
<tr>
    <td>Example 1</td>
    <td>Example 2</td>
    <td>Example 3</td>
</tr>

Answer 1

将<tr ng-repeat='row in TestController.table.rows'>替换为 <tr ng-repeat='row in TestController.rows'>

在您的控制器中，您设置了table = this，因此table.rows实际上是this.rows，因此可通过TestController.rows

加入标记

我的代码出了什么问题

1 个答案: