使用双向绑定与自定义指令和ng-repeat

Question

通过说我知道common answer来启动此操作是将ng-repeat放在指令的内容中，但在这种情况下，我无法弄清楚这将如何为此工作。

基本问题

当charCounter在字母跨度中增加时，我需要访问offsetTop中每个范围的ng-repeat值才能执行某些操作（当charCoutner到达时一个新行（具有offsetTop＆gt; 0），调整ng-repeat中begin中的limitTo变量。

奋斗点

我无法更新自定义指令中的变量，并使ng-repeat可以访问该变量。

如果我在ng-repeat之外有自定义指令，则我无权访问每个范围的offsetTop（但begin变量更新）。

<p><span shell counter="charCounter" begin="begin"><span ng-repeat="letter in data | limitTo: limit : begin track by $index"><span>{{letter}}</span></span></span></p>

我认为需要发生的是，但如何更新begin变量？

<p><span positioner counter="charCounter" begin="begin" ng-repeat="letter in data | limitTo: limit : begin track by $index"><span>{{letter}}</span></span></p>

代码笔样本

我在Code Pen上玩过这个，你可以在code pen here:

中看到这个问题

更新

我已经进一步采取了这个例子，并整合了r0m4n关于提升priority和@Amy Blankenship的反馈，以进一步澄清我想要做的事情。 Here is the updated CodePen。虽然这个技术上有效，但我不认为我现在甚至需要做一个自定义指令，因为我手动访问该元素而不是使用{{1来自指令。我对这一切仍然有一种微妙的理解。

Answer 1

您的范围绑定存在一些优先级问题。看看使用优先级属性。根据文档：

“当在单个DOM元素上定义了多个指令时，有时需要指定指令的应用顺序”

所以你可以这样做：

myApp.directive('positioner', function($timeout) {
  return {
    restrict: 'A',
    priority: 1001,
    scope: {
      letter: '=',
      begin: '=',
      counter: '='
    },
    link: function($scope, element, attr) {

      $timeout(function() {
        $scope.begin += 5;
        console.info('begin', $scope.begin);
      }, 1000);

    }
  };
});

https://docs.angularjs.org/api/ng/service/$compile