我的代碼有什么問題
[英]Whats wrong with my code
問題描述
我希望 tableRow.html 在表頭下方繪制，但 ng-repeat 根本沒有繪制，示例在表頭上方。 如果我將帶有示例的行直接放到 index.html 中的正確位置，它會繪制得很好。 我究竟做錯了什么？ 索引.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>
應用程序.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'
};
});
})();
表格行.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>
2 個解決方案
解決方案1
0 2015-09-13 15:39:19
將<tr ng-repeat='row in TestController.table.rows'>替換為<tr ng-repeat='row in TestController.rows'>
在您的控制器中，您正在設置table = this ，因此table.rows實際上是this.rows ，因此可通過TestController.rows進行標記
解決方案2
0 2015-09-13 16:50:41
我選擇回答這個問題：
此外，我在 codeschool 上遵循的教程將 angular.module 包裝在一個函數中，但我看到大多數其他示例都沒有。 有什么不同？ 為什么選擇一個而不是另一個？
這稱為立即調用的函數表達式或 (IIFE)。 這是一種將模塊引入 JavaScript 的輕量級方法。 使用這樣的東西的目的是確保在模塊頂層聲明的所有變量的詞法范圍。 沒有這樣的東西，很容易不小心引入全局變量，這一般是baaaaad的事情。
我的 mouseup 代碼有什么問題？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.