陣列屬性不解析來angularjs指令

我的指令是陣列屬性不解析來angularjs指令

angular.module('app').directive('authorDirective',authorDirective); 
function authorDirective() 
{ 
    return { 
     restrict: 'E', 
     scope: { 
      Authors: '=', 
      details: '&', 
      name : '=' 
     }, 
     replace : true, 
     template: 
     '<table class="table"><thead>'+ 
     '<tr><th>Name</th><th>Nationality</th><th>Dates</th></tr></thead>'+ 
     '<tbody ng-repeat="model in Authors">'+ 
     '<tr><td>{{model.Name}}</td><td>{{model.Nationality}}</td><td>{{model.Dates}}</td></tr>'+ 
     '</tbody></table>' 
    }; 

}

控制器是

angular.module('app').controller('LabController',LabController); 
function LabController() 
{ 
    var vm = this; 
    vm.Authors = [ 
     {Name : "Mark Twain",Nationality : "American", Dates : "1885-1910"}, 
     {Name : "A.A Miline",Nationality : "English", Dates : "1882-1956"}, 
     {Name : "Charles Dickens",Nationality : "English", Dates : "1812-1870"}, 
     {Name : "Jane Austen",Nationality : "English", Dates : "1775-1817"} 
    ]; 
}

和HTML

<!DOCTYPE html> 
<html ng-app="app"> 

<head> 
    <title>Directives</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" 
     crossorigin="anonymous"> 
</head> 

<body ng-controller="LabController as vm"> 
    <div class="container"> 
     <h1>Directives</h1> 
     <author-directive Authors="vm.Authors"></author-directive> 
    </div> 


    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
    <script src="./app/app.js"></script> 
    <script src="./app/LabController.js"></script> 
    <script src="./app/authorDirective.js"></script> 
</body> 

</html>

我試圖通過對象經由範圍屬性來指示。它正在工作。但是當我嘗試傳遞數組時，我不能。在瀏覽器控制檯中也沒有發現任何錯誤。我在這裏犯了什麼錯誤？預先感謝您的幫助。

Plunker is here

來源

2017-10-22 Newaz Sharif

指令屬性應該是低套管：authors="vm.Authors"

Plunker Demo

AngularJS Directive DOCS

正常化AngularJS標準化了元素的標籤和屬性名稱，以確定哪些元素匹配哪些指令。我們通常通過其區分大小寫的camelCase規範化名稱（例如，ngModel）來引用指令。但是，由於HTML不區分大小寫，所以我們通過小寫形式DOM指代DOM中的指令，通常使用DOM元素（例如，ng-模型）上的由劃線定界的屬性。

如果你想使用Authors，你可以寫Authors: '=authors',和DOM：<author-directive authors="vm.Authors"></author-directive>

Your Fixed Plunker

來源

2017-10-22 05:09:02

謝謝你的男人。得到你的答案，並正確理解解釋，它解決了我的問題，如魅力。 –

陣列屬性不解析來angularjs指令

回答

相關問題