Question

我有一个有趣的情况。我有一个带有隔离范围的指令，可以生成数字列表，用户可以选择彩票中的数字。我遇到的问题是我需要最少1行，如果用户只选择一行，那么当他点击播放时我想自动触发ng-repeat中的下一个指令来挑选他的数字，我做了这个plunker所以你伙计们可以更好地理解并帮助我。

http://plnkr.co/edit/vWGmSEpinf7wxRUnqyWq?p=preview

 <div ng-repeat="line in [0,1,2,3]">
    <div line line-config="lineConfig">

    </div>
  </div>

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

  $scope.lineConfig = {
    guessRange: 10
  }

  $scope.lines = [];

  $scope.$on('lineAdded', function(event, line) {
    $scope.lines.push(line);
  });


  $scope.play = function() {

    /// here i want to check if $scope.lines.length 
    //is less then one if yes then auto trigger the next 
    //line directive  to auto do quick pick and continue


  }

})
  .directive('line', function() {

    return {
      restrict: 'A',
      templateUrl: 'line.html',
      scope: {
        lineConfig: '='
      },
      link: function($scope, elem, attr) {

        var guessRange = $scope.lineConfig.guessRange;

        $scope.cells = [];

        $scope.line = {
          nums: []
        };

        $scope.$watch('line', function(lotLine) {
          var finaLine = {
            line: $scope.line
          }
          if ($scope.line.nums.length > 4) {
            $scope.$emit('lineAdded', finaLine);
          }

        }, true);

        _(_.range(1, guessRange + 1)).forEach(function(num) {
          $scope.cells.push({
            num: num,
            isSelected: false
          });
        });

        $scope.userPickNum = function(cell) {
          if (cell.isSelected) {
            cell.isSelected = false;
            _.pull($scope.lotLine.nums, cell.num);
          } else {
            cell.isSelected = true;
            $scope.lotLine.nums.push(cell.num);
          }
        };

        $scope.quickPick = function() {
          $scope.clearLot();
          $scope.line.nums = _.sample(_.range(1, guessRange + 1), 5);
          _($scope.line.nums).forEach(function(num) {
            num = _.find($scope.cells, {
              num: num
            });
            num.isSelected = true;
          });
        }

        $scope.clearLot = function() {
          _($scope.cells).forEach(function(num) {
            num.isSelected = false;
          });
          $scope.line.nums = [];
        }
      }
    }

  })

Answer 1

您可以将$ index（在ng-repeat范围内自动存在） - 变量传递到指令中，并使其广播一个唯一的（$ index + 1）事件，该事件是下一个实例的$ index。 / p>

该事件可以从$ rootScope广播，也可以在重复点之上播放。然后你可以在那里捕捉事件。

可能不是最好的方法。我可以尝试详细说明是否有任何不清楚的地方。

修改

所以我玩得很开心，想出了这个： http://plnkr.co/edit/ChRCyF7yQcN580umVfX1?p=preview 相反

不是使用事件或服务，而是使用指令控制器充当其中所有行指令的父级：

.directive('lineHandler', function () { return { controller: function () { this.lines = []; } } })

然后在'line'指令中要求'lineHandler'控制器 - 控制器是一个单独的（注入所有行指令的相同实例） - 然后你可以设置该控制器来处理你的指令之间的通信。

我在更新的plnkr中评论了我的大部分代码，并设置了一个例子，说明我在单击一个列表时所要求的内容 - 影响下面的列表。

我希望这会有所帮助，如果有什么不清楚，我会尝试详细说明。

ng-repeat中的角度自动触发特定指令

1 个答案: