[angularjs] 컨텐츠가로드 된 후 호출 할 AngularJs 이벤트

페이지 내용이로드 된 후 호출하려는 기능이 있습니다. $ viewContentLoaded에 대해 읽었으며 작동하지 않습니다. 나는 무언가를 찾고있다.

document.addEventListener('DOMContentLoaded', function () {
     //Content goes here 
}, false);

AngularJs 컨트롤러에서는 위의 호출이 작동하지 않습니다.



답변

$ viewContentLoaded의 문서에 따르면 작동해야합니다.

ngView 컨텐츠를 다시로드 할 때마다 발생합니다.

$viewContentLoaded 이 이벤트를 수신한다는 의미의 이벤트가 발생합니다.

<div ng-controller="MainCtrl">
  <div ng-view></div>
</div>

에서 MainCtrl이 이벤트를들을 수 있습니다

  $scope.$on('$viewContentLoaded', function(){
    //Here your view content is fully loaded !!
  });

데모 확인


답변

각도 <1.6.X

angular.element(document).ready(function () {
    console.log('page loading completed');
});

각도> = 1.6.X

angular.element(function () {
    console.log('page loading completed');
});


답변

고정-2015.06.09

지시문과 각도 요소 ready방법을 다음과 같이 사용하십시오 .

js

.directive( 'elemReady', function( $parse ) {
   return {
       restrict: 'A',
       link: function( $scope, elem, attrs ) {
          elem.ready(function(){
            $scope.$apply(function(){
                var func = $parse(attrs.elemReady);
                func($scope);
            })
          })
       }
    }
})

html

<div elem-ready="someMethod()"></div>

또는 컨트롤러로 구문을 사용 하는 사람들을 위해 …

<div elem-ready="vm.someMethod()"></div>

이것의 장점은 원하는만큼 UI를 넓게 또는 세분화 할 수 있고 컨트롤러에서 DOM 로직을 제거한다는 것입니다. 이것이 권장되는 Angular 방식 이라고 주장합니다 .

동일한 노드에서 다른 지시문이 작동하는 경우이 지시문의 우선 순위를 지정해야 할 수도 있습니다.


답변

{{YourFunction()}}HTML 요소 다음 에 추가하여 직접 호출 할 수 있습니다 .

여기 Plunker Link있습니다.


답변

Google 차트를 처리하는 동안이 논리를 구현해야했습니다. 내가 한 것은 컨트롤러 정의 내부의 HTML 끝에서 추가 한 것입니다.

  <body>
         -- some html here --
--and at the end or where ever you want --
          <div ng-init="FunCall()"></div>
    </body>

그 기능에서 단순히 논리를 호출하십시오.

$scope.FunCall = function () {
        alert("Called");
}


답변

var myM = angular.module('data-module');

myM.directive('myDirect',['$document', function( $document ){

    function link( scope , element , attrs ){

        element.ready( function(){

        } );

        scope.$on( '$viewContentLoaded' , function(){

            console.log(" ===> Called on View Load ") ;

        } );

    }

    return {
        link: link
    };

}] );

위의 방법은 나를 위해 일했습니다.


답변

각도 js에서 onload 이벤트의 자바 스크립트 버전을 호출 할 수 있습니다. 이 ng-load 이벤트는 div, span, body, iframe, img 등과 같은 dom 요소에 적용될 수 있습니다. 다음은 기존 프로젝트에 ng-load를 추가하는 링크입니다.

각도 js에 대한 ng-load 다운로드

다음은 iframe에 대한 예제입니다. 일단로드 되면 testCallbackFunction 이 컨트롤러에서 호출됩니다.

JS

    // include the `ngLoad` module
    var app = angular.module('myApp', ['ngLoad']);
    app.controller('myCtrl', function($scope) {
        $scope.testCallbackFunction = function() {
          //TODO : Things to do once Element is loaded
        };

    });

HTML

  <div ng-app='myApp' ng-controller='myCtrl'>
      <iframe src="test.html" ng-load callback="testCallbackFunction()">
  </div>