【结构可用,只可用于展示】如何在angularjs的directive指令的template中使用ng-repeat?

因为自己再写一个类似苹果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(正确答案在第二个人的回答那,往下拉即可)
但我也是那么写的啊,你猜出问题出在那儿了吗?

其实,就是红框中的属性名与属性值一致造成的错误,修改掉属性名就可以了。
这里写图片描述
给自己鼓掌~!!!!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章