使用自定义指令进行角度ng-repeat
[英]Angular ng-repeat with custom directive
问题描述
I'm having difficulty with the data from my controller scope being passed into a custom directive. 
我将控制器作用域中的数据传递给自定义指令时遇到困难。 The ng-repeat give me the correct number of elements, it's just not loading in the template or something. ng-repeat给了我正确数量的元素，它只是不加载模板或其他东西。
angular.module('myApp')
.controller('WorkflowController', ['$scope', function($scope){
$scope.columns = ['Requested Quote', 'Quote Sent', 'Deposit Paid'];
}])
.directive('kanban-column', function() {
return {
restrict: 'E',
replace: true,
scope: {column: '='},
templateUrl: 'directives/kanban-column/template.html'
}
})
// template.html:
<h4>{{column}}}}</h4>
With this in my index.html: 在我的index.html中有这个：
<div class='kanban-board'>
<kanban-column data-ng-repeat="column in columns" data-column="column">
</kanban-column>
</div>
The code is simplified a bit for clarity, but even the above verbatim does not work. 为了清楚起见，代码有点简化，但即使上面的逐字也不起作用。 Am I overlooking something? 我忽略了什么吗？
2 个解决方案
解决方案1
3 2015-11-03 05:36:11
First of all you have not passed dependency in your app so it will never instantiate . 首先，你没有在your app传递dependency ，因此它永远不会实例化。
angular.module('myApp',[]).controller('WorkflowController', ['$scope', function($scope){
$scope.columns = ['Requested Quote', 'Quote Sent', 'Deposit Paid'];
}]).directive('kanbanColumn', function() {
return {
restrict: 'E',
replace: true,
scope: {column: '='},
template: '<h4>{{column}}</h4>'
}
});
Try this one . 试试这个吧。
<div class='kanban-board'>
<div data-ng-repeat="column in columns">
<kanban-column data-column="column">
</kanban-column>
</div>
</div>
解决方案2
2 2015-11-03 06:05:39
try this code 试试这段代码
HTML: HTML：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script data-require="angular.js@1.0.x" src="http://code.angularjs.org/1.1.5/angular.min.js" data-semver="1.0.7"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="WorkflowController">
<div class='kanban-board'>
<kanban-column data-ng-repeat="column in columns" data-column="column">
</kanban-column>
</div>
</div>
</body>
</html>
JS: JS：
angular.module('myApp', [])
.controller('WorkflowController', ['$scope', function($scope) {
$scope.columns = ['Requested Quote', 'Quote Sent', 'Deposit Paid'];
}])
.directive('kanbanColumn', function() {
return {
restrict: 'E',
replace: true,
scope: {
column: '=?'
},
templateUrl: 'template.html'
};
});
template.html:
<h4>{{column}}</h4>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.