2. 程式人生 > >【結構可用，只可用於展示】如何在angularjs的directive指令的template中使用ng-repeat?

【結構可用，只可用於展示】如何在angularjs的directive指令的template中使用ng-repeat?

阿新 • • 發佈：2019-01-10

因為自己再寫一個類似蘋果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（正確答案在第二個人的回答那，往下拉即可）
但我也是那麼寫的啊，你猜出問題出在那兒了嗎？

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

相關推薦

【結構可用，只可用於展示】如何在angularjs的directive指令的template中使用ng-repeat?

因為自己再寫一個類似蘋果finder檔案管理器的效果，所以用到了這個功能，我被這個問題搞了一天左右。 上一篇的問題在這裡：我還沒有解決 我寫的程式碼： <div linkedlist listcolumns="{{cashAccountsColumns}}"><

萬能的公告欄輪播 View，也可用於商品個性垂直輪播展示

BulletinView 專案地址：Bakumon/BulletinView  簡介：:camel: 萬能的公告欄輪播 View，也可用於商品個性垂直輪播展示 更多：作者   提 Bug    標籤： &nbs

axios服務封裝，可用於任何支援axios的專案中，包括react和vue都可通用。get/post請求，以及併發請求。以及導航欄隨意切換測試/正式環境

任何專案，只要支援axios，那麼你只要把我現在封裝的服務整個資料夾考過去即可。這個原本是我封裝在vue裡的，但是有一天公司突然來一個緊急的H5微信分享活動的專案，我當時用react搭建（zepto+node搭建其實最好）也是為了挑戰一下自己，畢竟只有三天時間。所以當我把很多vue裡封裝的東西直

win10家庭版升級專業版的一些經驗方法（超簡單，也可用於專業版的啟用）

win10家庭版總有一些不太方便，有好多設定都沒法更改。 於是自己查找了許多教程，找到一條最可靠的、最簡單的升級/啟用方法，在此分享給大家。 此方法有兩種（均要聯網），先看看手動操作是什麼樣的           &

EXTJS4中向textArea動態新增資訊的方法，也可用於聊天室，還有換行

var Rvalue = Ext.getCmp('message').getValue(); Ext.getCmp('message').setRawValue(Rvalue+'雲臺停止移動...... \n'); 此方法的思路是先獲取上次textArea裡的內容，然後新增

【我有一劍可開天門】分享一套百度的面試真題，這邊建議是收藏！

## 前言 說一下，最新在重溫雪中悍刀行這本小說，故此有了這麼一個沙雕標題（小聲bb。這本書是真的好看），這套面試題是一個粉絲總結完發給我的，本意是想讓我分享出來幫助到更多的人，我整理了一下，算是比較詳細，下面分享給大家！ ![](https://upload-images.jianshu.io/upload

【PyCharm】手把手教你在Windows上安裝PyCharm--詳細介紹【多圖，手機流量慎入】

0 系統環境 Windows 10 PyCharm 2018.2.4 1 下載軟體 Q： 如何看待某些人下載軟體喜歡到官網的偏好？ A：同學，你沒有中國百度全家桶吧？ ----摘自 知乎 官網下載軟體，請按圖索驥。 1.1 搜尋官網 1.2 準備下載

【打CF，學演算法——一星級】CodeForces 617D Polyline（水題）

There are three points marked on the coordinate plane. The goal is to make a simple polyline, without self-intersections and self-touches, such that it pa

《Urban stranger》——都市異鄉人｛英漢互譯｝【都市時代，異鄉異客的我們】

《Urban stranger》——都市異鄉人                                    

【打CF，學演算法——一星級】CodeForces 701A Cards（水題）

題面： A. Cards time limit per test 1 second memory limit per test 256 megabytes input standar

windows下ffmpeg音視訊採集並推流【較亂，懶的整理了】

【大多為蒐集的文章，都歸類為，轉載。所以沒有標明，來處。】 1.windows下ffmpeg的編譯：         如：./configure --disable-yasm --enable-static --enable-indev=dshow 如果裝了yasm，x2

RabbitMQ 配置檔案沒法成功應用【實測可用文末有rmq配置】

RabbitMQ 配置檔案無法成功應用 本來想遠端啟用下Guest賬戶測試一下(學習)，但配置檔案修改後總是不成功(沒有效果) 過程如下： 1:先找到配置檔案地址 不錯,很貼心還有說明,在登入賬戶的AppData下. 2:直接進入對應目錄: 恩恩,不錯,

【打CF，學演算法——一星級】CodeForces 227B Effective Approach （水題）

Once at a team training Vasya, Petya and Sasha got a problem on implementing linear search in an array. According to the boys, linear search works as foll

陣列排序【值排序，值相同鍵排序】

#有陣列$list=array(‘mango’=>123,’orange’=>’234’,’banana’=>’101’,’apple’=>123)， #要求：不使用PHP自帶函式，自己編寫一個函式，對該陣列按值升序排序，值相同的按鍵升序排列 fun

理解HTTP訊息頭【很完整，例子也很豐富】

但凡搞WEB開發的人都離不開HTTP（超文字傳輸協議），而要了解HTTP，除了HTML本身以外，還有一部分不可忽視的就是HTTP訊息頭。 做過Socket程式設計的人都知道，當我們設計一個通訊協議時，“訊息頭/訊息體”的分割方式是很常用的，訊息頭告訴對方這個訊息是幹什麼的，訊息體告訴對方怎麼幹。HTTP傳輸的

日誌文件報警監控腳本(可用於zabbix監控文件)測試中...

self 監控項 erro fin 備註 exe 配置文件 並且 不用 因業務要求，需要對某些日誌文件中出現的關鍵字進行監控，所以寫了個腳本用於直接用zabbix調用並返回超出閾值的監控項。 主要用來替代zabbix自帶的文件監控項。可以對一臺機器上的多個日誌文件，多個觸發

hihocoder 二分·二分答案【二分搜尋，最大化最小值】 (bfs)

題目 這道題做了幾個小時了都沒有做出來，首先是題意搞了半天都沒有弄懂，難道真的是因為我不打遊戲所以連題都讀不懂了？ 反正今天是弄不懂了，過幾天再來看看。。。 題意：一個人從1點出發到T點去打boss，這個人有兩個屬性值，防禦值和戰鬥值，這兩個值成反比，為了打贏boss我

【線性代數公開課MIT Linear Algebra】 實際應用——python中的線性代數(1)

目前已經看完了公開課的三分之一，線性代數中的常見概念也已經差不多全部介紹了一遍，那麼在實際應用中會藉助於計算機來實現，這裡將介紹如何在python中使用我們學到的知識。 NumPy系統是Python的一種開源的數值計算擴充套件。這種工具可用來儲存和處理大

【Java學習筆記之三十二】淺談Java中throw與throws的用法及異常拋出處理機制剖析

input auto void ref 淺談 .html ssa 不能 而是 異常處理機制 異常處理是對可能出現的異常進行處理，以防止程序遇到異常時被卡死，處於一直等待，或死循環。 異常有兩個過程，一個是拋出異常；一個是捕捉異常。 拋出異常 拋出異常有三種

【java】java反射機制，動態獲取對象的屬性和對應的參數值，並屬性按照字典序排序，Field.setAccessible()方法的說明【可用於微信支付 簽名生成】

modifier 直接 this 字段值 1-1 讓我 toupper ima play 方法1：通過get()方法獲取屬性值 package com.sxd.test.controller; public class FirstCa{ private