Question

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

首先，你没有在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

Answer 2

试试这段代码

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：

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>

使用自定义指令进行角度ng-repeat

2 个答案: