Javascript AngularJS：视图完全加载后的DOM操作_Javascript_Angularjs_Angularjs Directive_Timeout_Angularjs Ng Repeat

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

javascript angularjs

Javascript AngularJS：视图完全加载后的DOM操作,javascript,angularjs,angularjs-directive,timeout,angularjs-ng-repeat,Javascript,Angularjs,Angularjs Directive,Timeout,Angularjs Ng Repeat,为这篇冗长的帖子道歉——我希望它不会让太多人感到厌烦。我所拥有的是有效的，但我只是不确定这是否是做事情的“正确”方式，所以我只是在寻求一些建议我有一个页面，我使用窗口大小来计算动态元素数量的位置。这些元素是根据窗口的大小隔开的，然后我使用Canvas元素来绘制将每个元素连接到中心元素的线我遇到的问题是知道何时创建了所有元素，现在可以调整大小和定位了我的HTML是这样的： <div class="panel"> <div class="panel_c

为这篇冗长的帖子道歉——我希望它不会让太多人感到厌烦。我所拥有的是有效的，但我只是不确定这是否是做事情的“正确”方式，所以我只是在寻求一些建议

我有一个页面，我使用窗口大小来计算动态元素数量的位置。这些元素是根据窗口的大小隔开的，然后我使用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>

正如它所建议的，positionElements（）就是我所有的代码在创建元素后定位元素的地方。它工作得很好，尽管它可能以更“角度”的方式完成（它只是一个标准的JS函数，依赖于成熟的jQuery）

在指令中，我使用$last属性，因此我仅在它是ng repeat中的最后一个元素时调用positionElements（），因为我需要了解所有元素，以便正确定位它们。我还使用$timeout，以便在呈现页面后将代码排队运行

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

目前，我将调用positionElements（）两次，一次用于输入映射，一次用于输出映射。实际上，我只需要在创建了所有映射元素之后调用它一次（并且只调用一次）。使用$timeout和$last也感觉不太好-感觉好像会有一些事件告诉我视图已经创建，但我发现的一切都是死胡同

无论如何，对于以上建议或建议，我们将不胜感激。

使用$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:

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

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);
      });
    }
  }
});

  <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>