Question

使用ng-repeat时，如何在其中使用控制器？

例如，如果我在一周的一天中循环：

<ul ng-controller="WeekCtrl">
    <li ng-repeat="d in days">
        <span ng-controller="DayCtrl">
            {{dayOfWeek}} {{date}}: {{info}}
        </span>
    </li>
</ul>

但我的DayCtrl想知道它是d的哪一天，所以必须将其拉出范围：

app.controller('DayCtrl', function($scope){
  $scope.date = $scope.d.date;
  $scope.dayOfWeek = 
    ['Mon','Tue','Wed','Thr','Fri','Sat','Sun']
    [$scope.d.date.getDay()];
  $scope.info = '... extra info...';
});

但是这会在显示器和控制器之间产生依赖关系。理想情况下，我想传递d.date作为论据。

我可以编写一个指令+控制器并将d.date作为属性传递。但这意味着我必须写更多内容并将当天的html移动到单独的模板中，我不打算在其他地方使用DayCtrl。

或者，我可以尝试使用<span ng-init="date=d.date">，但是再次感觉很脏。

这样做的正确方法是什么。

Plunker上的完整示例代码：http://plnkr.co/edit/wUxNFSEGjcDN7KlOLYdv显示了我在几天和几周内遇到的问题。

Answer 1

对我而言，这似乎是指令的工作，d.date被指定为属性。
我不知道如何填充info，但可能你的指令不会需要一个控制器。

当天的HTML不必在单独的/指令模板中，它可以保留在HTML中：

 <li ng-repeat="d in days">
    <day date="d.date">
       {{dayOfWeek}} {{date}}: {{info}}
    </day>
 </li>

指令：

app.directive('day', function() {
  return {
    restrict: 'E',
    scope: { date: '=' },
    link: function(scope) {
     scope.dayOfWeek =  ['Mon','Tue','Wed','Thr','Fri','Sat','Sun'][scope.date.getDay()];
     scope.info = '... extra info...';
    }
  };
});

Plunkr

仅供参考，如果您想使用ng-init，可以将其包含在ng-controller中：

<span ng-controller="DayCtrl" ng-init="date=d.date">

使用内部重复控制器，我需要一个指令吗？

1 个答案: