Angular自定義指令中的動態模板（在嵌套的ng重複內）不起作用

我是一個通用的Angular/JS框架的新手，我試圖讓這個飛機座位數據顯示使用動態模板，但它不是加工。Angular自定義指令中的動態模板（在嵌套的ng重複內）不起作用

我試着按照指南this site但沒有運氣。

這裏是我的html，其中 'row.seats' 是一個對象字面和 'row.rowLetter' 是一個字符串：

<tr ng-repeat="row in rows"> 
    <seat-item ng-repeat="seat in row.seats" thisseat="seat" thisrow="row.rowLetter"></seat-item> 
</tr>

這裏是我的指令：

angular.module('myApp.directives', []).directive('seatItem', function($compile) { 
    var template1 = '<td> {{thisrow}} {{thisseat.price}} </td>', 
     template2 = '<td> seat unavailable </td>'; 

    var getTemplate = function(thisseat) { 
    if(thisseat.isAvailable) { // is a boolean property on seat object 
     return template1; 
    } 
    return template2; 
    } 

    var linker = function(scope, element, attrs) { 
    element.html(getTemplate(scope.thisseat)).show(); 
    $compile(element.contents())(scope); // not sure what contents refers to... 
    } 

    return { 
    restrict: 'E', 
    replace: true, 
    link: linker, 
    scope: { 
     thisseat: '=', 
     thisrow: '@' 
    } 
    } 
}

我有我的控制器設置$ scope.rows，但是當我試圖在指令中移動所有這些邏輯時（我最初在我的視圖中使用ng-ifs），它停止工作。從我可以告訴我甚至沒有進入鏈接器功能（儘管我輸入指令）。

任何幫助或資源的鏈接，將不勝感激！

來源

2014-02-13 vegas-dev

好吧，我能有什麼解決問題。我的代碼的2個主要更改：

1）有一個自定義標記似乎混淆了ng重複的呈現，所以使seat-item屬性，而不是固定的問題。

<tr ng-repeat='row in rows'> 
    <td seat-item ng-repeat='seat in row.seats' thisseat='seat' thisrow={{row.row}}> 
</tr>

2）的方法/屬性.show（）和.html分別造成如此，而不是錯誤：

element.html(getTemplate(scope.thisseat)).show();

改變了代碼在連接到：

element.append(getTemplate(scope.thisseat));

不經歷足夠Angular知道是什麼導致了最初的錯誤，但也許有人在評論中可以解釋。

來源

2014-02-13 18:14:48

我會用NG-顯示NG-隱藏

例如：

<tr ng-repeat="row in rows"> 
    <seat-item ng-repeat="seat in row.seats" thisseat="seat" thisrow="row.rowLetter"> 
     <td ng-show='seat.isAvailable'> {{thisrow}} {{thisseat.price}} </td> 
     <td ng-show='!seat.isAvailable'> seat unavailable </td> 
    </seat-item> 
</tr>

諮詢文檔上的顯示/隱藏究竟是如何工作我可能有它backwords 但我以前用過他們，結果制定出偉大的

這也將是更加清楚任何閱讀您的HTML作爲模板確實

來源

2014-02-13 14:50:27

感謝您的評論，但我試圖儘可能抽象我的視圖邏輯。 –

不用擔心，因爲您擁有數據的對象，您可以使用已有數據創建模板，除非需要編輯/綁定 –

Angular自定義指令中的動態模板（在嵌套的ng重複內）不起作用

回答

相關問題