angularjs child 지시어 DOM이 충분히 빨리 로딩되지 않는다.

안녕하세요, 나는 중첩 된 지시문과 함께 부모 지시문과 함께 그 자식 지시어를 사용할 수 있습니다. 내 문제는 시간 제한을 설정하지 않으면 부모 링크 함수에서 배열을 반환하지 않는 dom 요소를 찾으려고 할 때입니다. 그것은 자식 렌더링/전환이 충분히 빠르게 일어나지 않는 것처럼 보입니다. 그래서 시간 제한을 사용하지 않고이를 해결하고 자식 요소를 찾도록하는 방법이 있을까요?angularjs child 지시어 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(){ 
 
\t return { 
 
\t \t restrict: 'EA', 
 
\t \t transclude: true, 
 
\t \t replace: true, 
 
\t \t templateUrl: 'innerPane.html', 
 
\t \t scope:{}, 
 
\t \t link: function(scope,element,attr){ 
 

 
\t \t } 
 
\t } 
 
}) 
 
.directive('slidePaneSelector', ['$timeout',function($timeout){ 
 
\t return { 
 
\t \t restrict: 'EA', 
 
\t \t transclude: true, 
 
\t \t replace: true, 
 
\t \t templateUrl: 'slidePaneSelector.html', 
 
\t \t scope:{}, 
 
\t \t link: function(scope,element,attr){ 
 

 
\t \t \t var firstPaneElement = angular.element(element.find('div')[0]); 
 
\t \t \t var secondPaneElement = angular.element(element.find('div')[1]); 
 
\t \t \t 
 
\t \t \t console.log(element.find('div')); \t \t 
 

 
     $timeout(function(){ 
 
      console.log(element.find('div')); 
 
     },100); 
 
\t \t 
 
\t \t } 
 
\t } 
 
}]);

<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="[email protected]" 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

출처

2015-01-29 jameseatzfood

타임 아웃은 시간이 없지만 다이제스트가 끝나기를 기다리는 것입니다. 0 밀리 초 동안 $ timeout을하더라도 검색이 작동합니다. 이는 $ timeout이 현재 다이제스트가 실행되기 전에 끝나기를 기다리기 때문입니다. 이 말은 내가 주위에 일을 모른다 : ( – chandings

0으로 변경하면 작동하지 않는다 – jameseatzfood

http://plnkr.co/edit/Ctrbbn0G2Dq8bbUBlAw7?p=preview – chandings

당신은 시간 구성 요소없이 $timeout을 사용할 수 있습니다 - 그것은 $의 끝에 기다릴 것이다주기를 소화하고 실행합니다.

올바른 방법은 하위 지시문을 부모와 함께 "등록"하도록하는 것입니다. 이것은 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-29 07:21:16

angularjs child 지시어 DOM이 충분히 빨리 로딩되지 않는다.

답변

관련 문제