angularjs 子指令 DOM 加载速度不够快

angularjs child directive DOM doesn't load fast enough

本文关键字：速度 不够 加载 DOM 指令 angularjs      更新时间：2023-09-26

嗨，我有嵌套指令，其中我有一个父指令以及可以包含的子指令。 我的问题是，当尝试在父链接函数中找到一些 dom 元素时，除非我设置超时，否则它不会返回数组。 子渲染/嵌入似乎发生得不够快。 那么有没有办法在不使用超时然后调用查找子元素的情况下解决这个问题呢？

var app = angular.module('plunker', [])
.run(function($templateCache){
  $templateCache.put('innerPane.html', "<div class='inner-pane' ng-transclude></div>");
  $templateCache.put('slidePaneSelector.html', "<div class='slide-pane'><inner-pane><h2>First Inner Pane</h2></inner-pane><inner-pane><h2>Second Inner Pane</h2></inner-pane></div>");
})
.directive('innerPane', function(){
	return {
		restrict: 'EA',
		transclude: true,
		replace: true,
		templateUrl: 'innerPane.html',
		scope:{},
		link: function(scope,element,attr){
		}
	}
})
.directive('slidePaneSelector', ['$timeout',function($timeout){
	return {
		restrict: 'EA',
		transclude: true,
		replace: true,
		templateUrl: 'slidePaneSelector.html',
		scope:{},
		link: function(scope,element,attr){
			var firstPaneElement = angular.element(element.find('div')[0]);
			var secondPaneElement = angular.element(element.find('div')[1]);
			
			console.log(element.find('div'));		
      $timeout(function(){
          console.log(element.find('div'));
      },100);
		
		}
	}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="plunker">
  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
    <script src="app.js"></script>
  </head>
  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    
    <slide-pane-selector></slide-pane-selector>
  </body>
</html>

普伦克：http://plnkr.co/edit/sS5cSMboSV2mjlRxsgO8?p=preview

您可以使用不带时间组件的$timeout - 它将等待$digest周期结束并执行。

我认为，正确的方法是让子指令"注册"到父指令。这是通过require: "^parent"和在父控制器上公开一些register方法来完成的。

.directive("parent", function(){
  return {
    controller: function($scope, $element){
       this.registerChild = function(childElement){
          // do whatever you need here
       }
    }
  }
}
.directive("child", function(){
  return {
    require: "^parent",
    link: function(scope, element, attrs, parentCtrl){
       parentCtrl.registerChild(element);
    }
  }
}
相关文章：