角指令不評估內部NG-重複

Question

我有以下設置：

應用程序/指令

var app = angular.module("MyApp", []); 

app.directive("adminRosterItem", function() { 
    return { 
     restrict: "E", 
     scope: { 
      displayText: "@" 
     }, 
     template: "<td>{{ displayText }}</td>", // should I have this? 
     link: function(scope, element, attrs){ 
      // What do I put here? I don't seem to have any 
      // element to initialize (set up event handlers, for example) 
     }, 
     compile: function(?,?,?){} // should I have this? If so, what goes inside? 
    } 
}); 

控制器

function PositionsController($scope) { 
      $scope.positions = [{ Name: "Quarterback", Code: "QB" }, 
           { Name: "Wide Receiver", Code: "WR" } 
           ]; 
} 

HTML：

<div ng-app="MyApp"> 
    <div ng-controller="PositionsController">    
     <table> 
      <tr ng-repeat="position in positions"> 
       <admin-roster-item displayText="{{ position.Name + ' (' + position.Code + ')' }}"></admin-roster-item> 
      </tr> 
     </table>  
    </div> 
</div> 

這是一個非常簡單的例子，但我可以不要讓它渲染。也許有些教程沒有告訴我，或者那是祕密的角度知識？

如果我刪除<tr ng-repeat="..." />中的指令並將<td>{{ displayText }}</td>替換掉，它將顯示所有記錄。

但我希望指令比單個<td>{{}}</td>更復雜（最終），以便我可以在多個應用程序中重用此指令。

所以，我真的在問我們如何正確地創建一個在ng-repeat內部的指令？我錯過了什麼？應該從上面的代碼中取出什麼？

Answer 1

同意您需要考慮指令開始和結束的位置。如果你想指令封裝通過它得到一些技巧性父範圍內定義的集合的枚舉http://plnkr.co/edit/IU8fANreYP7NYrs4swTW?p=preview

- 下面是說明綁定到陣列中的每一項指令中plnkr。我不確定以下是「最佳做法」，但它是我處理它的方式 - http://plnkr.co/edit/IU8fANreYP7NYrs4swTW?p=preview

當依靠指令執行迭代時，您會涉及到跨越，這是一個構成詞這意味着（根據我的理解）採取在父母定義的內容，推入到指令，然後評估它。我一直在用角度工作幾個月，而且我開始認爲要求指令迭代是一種氣味，我一直能夠圍繞它進行設計。

Answer 2

我認爲解決這個正確的方法是將對象發送到管理名冊的項目，如：

<tr ng-repeat="position in positions"> 
    <admin-roster-item pos="position">   
    </admin-roster-item> 
</tr> 

，並在指令：

var app = angular.module("MyApp", []); 

app.directive("adminRosterItem", function() { 
    return { 
    restrict: "E", 
    scope: { 
     pos: "@" 
    }, 
    template: "<td>{{ formattedText }}</td>", // should I have this? 
    link: function(scope, element, attrs){ 
     // all of this can easily be done with a filter, but i understand you just want to  
     // know how it works 
     scope.formattedText = scope.pos.Name + ' (' + scope.pos.Code + ')'; 
    } 
    } 
}); 

PS。我沒有測試這個！

Answer 3

忽略所有的理論方面，你可以通過兩個簡單的改變來讓你的代碼工作。

1. 請勿在屬性名稱中使用混合大小寫。 displaytext不displayText
2. 把<td>標籤指令以外，模板

做到這一點，它會工作;它認爲這些都是角錯誤。

Answer 4

我有類似的問題，在NG-重複在我看來沃斯如果視圖包含指令（「mydirective」）

我的指令定義是

angular.module('myApp') 
    .directive('myDirective', function() { 
    return { 
     templateUrl: 'components/directives/mydirective.html', 
     restrict: 'EA', 
     controller: 'MyDirectiveController', 
     controllerAs: 'vm', 
     link: function (scope, element, attrs) { 
     } 
    }; 
    }); 

和我的視圖控制器不評估清晰度爲

angular.module('myApp') 
    .component('myView', { 
     templateUrl: 'app/views/myview.html', 
     controller: myViewComponent, 
     controllerAs: "vm" 
    }); 

您可以注意到兩個控制器都是通過使用'controllerAs'參數'vm'來引用的。這是問題的原因。當視圖中存在指令時，angular始終引用在指令控制器中定義的「vm」而不是視圖的。

當我給不同的名稱控制器的引用，問題消失

現在，我的指令定義是

angular.module('myApp') 
    .directive('myDirective', function() { 
    return { 
     templateUrl: 'components/directives/mydirective.html', 
     restrict: 'EA', 
     controller: 'MyDirectiveController', 
     controllerAs: 'directiveVM', 
     link: function (scope, element, attrs) { 
     } 
    }; 
    }); 

和我的視圖控制器定義是

angular.module('myApp') 
    .component('myView', { 
     templateUrl: 'app/views/myview.html', 
     controller: myViewComponent, 
     controllerAs: "viewCtrlVM" 
    }); 

希望它能幫助。

Answer 5

而不是寫你的指令，因爲NG重複的孩子，儘量保持自定義指令在同一水平上爲NG-重複，這

<tr ng-repeat="position in positions" admin-roster-item displayText="{{ position.Name + ' (' + position.Code + ')' }}"></tr> 

，此外，讓您的自定義指令用作屬性。 AngulaJS已經將ng-repeats的優先級定義爲1000，所以在你製作自定義指令的時候，ng-repeat的效果並不好。

第二個選項（只嘗試，如果第一個失敗）是您的自定義指令的優先級設置不止於此ngRepeat即到1001

Answer 6

只好完全相同的問題。 在ng-repeat，table-> tr-> td->指令中有一個自定義指令，並且在使用ng-repeat和Array.sort對錶進行排序時，表確實改變了順序，但指令沒有重新呈現。問題是我正在使用

track by $index 

從ng-repeat中刪除了索引，並且它是固定的。