【結構可用,只可用於展示】如何在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(正確答案在第二個人的回答那,往下拉即可)
但我也是那麼寫的啊,你猜出問題出在那兒了嗎?

其實,就是紅框中的屬性名與屬性值一致造成的錯誤,修改掉屬性名就可以了。
這裏寫圖片描述
給自己鼓掌~!!!!

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