angularjs - 带有自定义指令的 Angular ng-repeat

Question

我在将 Controller 范围内的数据传递到自定义指令时遇到困难。 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>

在我的index.html中使用这个:

<div class='kanban-board'>
    <kanban-column data-ng-repeat="column in columns" data-column="column">
    </kanban-column>
</div>

为了清晰起见，代码被简化了一点，但即使上面的逐字记录也不起作用。我是否忽略了什么？

Answer 1

首先，您尚未在您的应用中传递依赖项，因此它永远不会实例化。

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>'
  }
});

试试这个。

<div class='kanban-board'>
    <div data-ng-repeat="column in columns">
       <kanban-column data-column="column">
       </kanban-column>
    </div>
</div>

Working plunkr