Question

我想在第一次出现时在html元素上的ng-repeat中应用自定义指令。第一次出现后的所有其他元素都没有指令，或者不会启用指令。

元素可能不会出现在ng-repeat的第一次迭代中，所以我不能先使用$。

我正在创建一个教程工具提示，并希望它只显示在第一个可见元素上。 ng-repeat的基础范围不了解本教程，因此我无法使用它。

Answer 1

我认为你可以写一个像这样的指令 -

var app = angular.module('app', [])

app.controller('HomeCtrl', ['$scope',
  function($scope) {
    $scope.done = false;
    $scope.items = [{
      name: 'One'
    }, {
      name: 'Two'
    }, {
      name: 'Three',
      special: true
    }, {
      name: 'Four',
      special: true
    }, {
      name: 'Five',
      special: true
    }];
  }
]);

app.directive('special', function() {
  return {
    scope: false,
    restrict: 'A',
    link: function(scope, element, attrs) {
      if (scope.item.special && !scope.$parent.$parent.done) {
        scope.done = true;
        scope.$parent.$parent.done = true;
      }
    },
    template: "<p ng-class='{active: item.special && this.done}'>{{ item.name }}</p>"
  };
});

.active {
  color: red;
}

<!DOCTYPE html>
<html ng-app="app">

<head>
  <title>Demo</title>
</head>

<body ng-controller="HomeCtrl">

  <li ng-repeat="item in items track by $index" special="" item="item" done="done">{{ item.name }}</li>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</body>

</html>

<强>更新

所以，p！我得到了它的工作，但如果你看看指令，你会看到我正在使用$ parent属性使用父作用域。我现在没有更好的解决方案。：（

希望有所帮助！

显示AngularJS指令ng-repeat第一次元素

1 个答案: