Angular가 DOM을 HTML로 동적으로로드하는시기를 올바르게 확인하는 방법

Question

AngularJS를 사용하는 동안 내 응용 프로그램이 이벤트 기반이되도록하는 데 어려움을 겪고 있습니다. jQuery에서는 DOM이 문서에로드 될 때를 확인하여 이벤트 리스너를 새 DOM에 바인딩 할 수 있습니다. 그러나 Angular에서 이와 동일한 효과를 얻으려고 노력 중이며 "hacky"가 아닌 방법을 찾을 수 없습니다.

예를 들어 오버레이가 문서에 추가 될 때 부분 뷰를 추가하고 사용자가 상호 작용할 수 있도록 <div>이 표시됩니다. 그러나 제대로 맞춰지기 위해 JavaScript가로드 된 후 실행해야하기 때문에이 부분을 정확히 가운데에 놓을 수는 없습니다 (<div>).

부분 뷰에서 ng-init="center()"을 사용했지만 이미지가 추가 된 후에 Angular가 뷰를 다시 컴파일하고 있다고 생각하지 않으므로 ng-init이 호출되지 않습니다. 이상한 해킹없이이 이벤트 기반 기능을 사용하려면 어떻게해야합니까? JQuery와 방법으로 생각 -

Answer 1

난 그냥 당신은 내가 처음 각도로 시작했을 때 내가 무슨 짓을하고있는

<div id="cover" ng-include="overlay.url" onload="centerIt()"></div> 

Answer 2

를로드 한 내 ng-include 사업부에 onload 속성을 사용하는 데 필요한.

은 특정 문제에 관해서 다른 How do I “think in AngularJS” if I have a jQuery background?

'생각'에서 더 많은 정보를 원하시면,이 게시물을 참조하십시오. 속성을 사용하여 div에 첨부하는 지시문을 만들 수 있습니다. 그런 다음, 반환의 link 개체에서 해당 지시문에 대해 CSS를 설정합니다. 필요한 경우 javascript를 사용합니다.

즉 같은 것을, 의사 코드에 다음

app.Directives('myDirective', function()){ 
    return{ 
    restrict: 'A', 
    link: function(scope, elem, attr){ 
     //do something with elem - it's an angular.element which you can also 
     // interact with using jquery methds. 
     // such as elem.hide(); 
     // you can also search through its child nodes in the same 
     // way with jquery, like elem.each(..... 
     } 

    } 
} 

당신의 div

<div my-directive></div> 같은 궁극적으로 다르게 '생각'해야합니까. 당신의 지시에 나는 또한 jQuery를 사용하지 않는 것이 좋습니다 것

정말 '각도'방식

업데이트 의견으로 당

에 사용하세요. 동적으로 DIV의 위치를 ​​조정하는 경우, 당신은 아마이 일을해야

app.Directives('myDirective', function()){ 
    return{ 
    restrict: 'A', 
    template: '<div ng-include="setTemplate()"></div>', 
    link: function(scope, elem, attr){ 

     scope.setTemplate = function(){ 
      // do your logic here... 
      return 'overlay.html'; 
      } 

     } 

    } 
} 

Answer 3

: - 동적으로 지시어가 사용하고있는 템플릿을 변경하려는 경우이 경우 templateUrl을, 당신은 뭔가를 할 수 있습니다 해당 div에 대한 사용자 지정 지시문이 있습니다. 지시문의 링크 함수는 div를 두 번째 매개 변수로 가져옵니다. 그런 다음 jQuery 또는 jQLite를 사용하여 원하는대로 배치 할 수 있습니다.