因为自己再写一个类似苹果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(正确答案在第二个人的回答那,往下拉即可)
但我也是那么写的啊,你猜出问题出在那儿了吗?
其实,就是红框中的属性名与属性值一致造成的错误,修改掉属性名就可以了。
给自己鼓掌~!!!!