Question

您好我有嵌套指令，其中我有一个父指令及其子指令可以被转换。我的问题是当尝试在父链接函数中找到一些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>

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

Answer 1

你可以使用没有时间组件的$timeout - 它会等到$ digest循环结束并执行。

我认为，正确的方法是让孩子指示＆＃34;注册＆＃34;与父母。这是通过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);
    }
  }
}

angularjs子指令DOM没有足够快的加载速度

1 个答案: