我的指令是
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>'
};
}
Controller 是
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>
我试图通过范围属性将对象传递给指令。它正在工作。但是当我尝试传递数组时我不能。在浏览器控制台中也没有发现任何错误。我在这里做错了什么？在此先感谢您的帮助。
最佳答案
指令属性应该小写:authors="vm.Authors"
Normalization AngularJS normalizes an element's tag and attribute name to determine which elements match which directives. We typically refer to directives by their case-sensitive camelCase normalized name (e.g. ngModel). However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case forms, typically using dash-delimited attributes on DOM elements (e.g. ng-model).
如果你想使用Authors , 你可以写 Authors: '=authors',在 DOM 中:<author-directive authors="vm.Authors"></author-directive>
关于javascript - 数组属性未解析为 angularjs 指令，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46870639/