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

我很难将控制器作用域中的数据传递到自定义指令中。 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>

为了清楚起见，对代码进行了一些简化，但是即使上面的逐字记录也不起作用。我在俯视什么吗？

最佳答案

首先，您尚未在dependency中传递your app，因此它将永远不会实例化。

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