1

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

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>

Plunker： http ://plnkr.co/edit/sS5cSMboSV2mjlRxsgO8?p=preview

4

1 回答 1

2

您可以使用$timeout没有时间组件的 a - 它会等到 $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);
    }
  }
}
于 2015-01-29T07:21:16.520 回答