Question

长篇大论道歉 - 我希望它不会让太多人失望。我所拥有的是工作，但我不确定这是否是“正确”的做事方式，所以我只是在寻找一些建议。

我有一个页面，我正在使用窗口大小来计算动态数量的元素的位置。这些元素根据窗口的大小而间隔开，然后我使用Canvas元素绘制将每个元素连接到中心元素的线条。

我遇到的问题是知道何时创建了所有元素，现在可以调整大小和定位。

我的HTML是这样的：

    <div class="panel">
        <div class="panel_content">
            <div class="input_mapping" ng-repeat="input in inputs" mapping-resize>
                {{input.name}}
            </div>
        </div>
    </div>
    <div class="panel">
        <div class="panel_content">
            <div class="central_mapping">
                {{mapping.name}}
            </div>
        </div>
    </div>
    <div class="panel">
        <div class="panel_content">
            <div class="output_mapping" ng-repeat="output in outputs" mapping-resize>
                {{output.name}}
            </div>
        </div>
    </div>

我正在使用指令，map-resize来调整大小，但这会在每个ng-repeat上运行。真的，我只想运行一次，一旦创建了所有子元素，但是如果我将指令放在父div（panel_content）上，它就不知道指令运行时的子元素，所以不会重新定位它们。

我的指示目前是：

app.directive('mappingResize', ['$timeout', function($timeout) {
    return function(scope, elem, attrs) {

        if(scope.$last) {
            $timeout(function() {
                positionElements();
            });
        }
    }
}]);

positionElements（）就像它所暗示的那样，我的所有代码都是在创建后定位元素的地方。它工作正常，虽然它可能以更“有角度的方式”完成（它只是一个标准的JS函数，依赖于完整的jQuery）。

在指令中，我使用$ last属性，所以我只调用positionElements（），如果它是ng-repeat中的最后一个元素，因为我需要了解所有这些元素才能正确定位它们。我也使用$ timeout，因此代码在页面呈现后排队等待运行。

我的问题是，这是我能做的最好的吗？

此刻，我正在调用positionElements（）两次 - 一次用于输入映射ng-repeat，一次用于输出映射。实际上，我只需要在创建所有映射元素时调用一次（并且只需调用一次）。使用$ timeout和$ last感觉不太好 - 感觉会有一些事件告诉我视图已经创建，但我发现的一切都是死路一条。

无论如何，对上述建议或建议将非常感激。

Answer 1

使用$ timeout并在页面末尾移动您的指令：

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

app.controller('MainCtrl', function($scope) {
  $scope.model = { items: [1,2,3,4,5] };
});

app.directive('directive', function () {
  return {
    link : function (scope, elem, attrs) {
      console.log(attrs.index);
    }
  }
});

app.directive('lastDirective', function ($timeout) {
  return {
    link : function (scope, elem, attrs) {
      $timeout(function () {
        // position elements here
        console.log(attrs.index);
      });
    }
  }
});

HTML：

  <body ng-controller="MainCtrl">
    <div ng-repeat="item in model.items" directive index="1"></div>
    <div ng-repeat="item in model.items" directive index="2"></div>
    <div last-directive index="3"></div>
  </body>

打开控制台以查看指令执行顺序

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

AngularJS：视图完全加载后的DOM操作

1 个答案: