因爲自己再寫一個類似蘋果finder文件管理器的效果,所以用到了這個功能,我被這個問題搞了一天左右。
上一篇的問題在這裏:我還沒有解決
我寫的代碼:
<div linkedlist listcolumns="{{cashAccountsColumns}}"></div>
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ddd</title>
<link rel="stylesheet" href="">
</head>
<body ng-controller="ctrl">
<div linked-list cashAccountsColumns="{{cashAccountsColumns}}"></div>
</body>
<script type="text/ng-template" id="linkedlist.html">
<table class="box-table" width="100%">
<thead>
<tr>
<th scope="col" ng-repeat="column in cashAccountsColumns">
{{column.title}}
</th>
</tr>
</thead>
</table>
</script>
<script src="../../lib/js/angular.js"></script>
<script>
angular.module('app', []).controller('ctrl', function($scope) {
$scope.cashAccountsColumns = [
{ "field": "description", "title": "Description" },
{ "field": "owner", "title": "Owner" },
{ "field": "currentBalance", "title": "Current Balance" }
];
}).directive('linkedList', function() {
return {
restrict: 'EA',
templateUrl: 'linkedlist.html',
replace: true,
scope: {
cashAccountsColumns: "="
},
link: function(scope, element, attrs) {
console.log(scope.cashAccountsColumns);
}
}
})
</script>
</html>
運行結果:
不報錯,只是獲取不到值
然後就一直搜索相關的問題,終於找到了這篇:https://stackoverflow.com/questions/16646607/how-to-use-ng-repeat-within-template-of-a-directive-in-angular-js(正確答案在第二個人的回答那,往下拉即可)
但我也是那麼寫的啊,你猜出問題出在那兒了嗎?
其實,就是紅框中的屬性名與屬性值一致造成的錯誤,修改掉屬性名就可以了。
給自己鼓掌~!!!!