[javascript] 문서가 준비된 AngularJS 컨트롤러에서 기능을 실행하는 방법은 무엇입니까?
각도 컨트롤러 내에 함수가 있습니다.이 함수를 문서 준비에서 실행하고 싶지만 dom이 생성 될 때 각도가 실행되는 것을 알았습니다.
function myController($scope)
{
$scope.init = function()
{
// I'd like to run this on document ready
}
$scope.init(); // doesn't work, loads my init before the page has completely loaded
}아무도 내가 어떻게 할 수 있는지 알고 있습니까?
답변
이 angular.element(document).ready()메소드를 사용하여 문서가 준비 될 때 콜백을 첨부 할 수 있습니다 . 다음과 같이 컨트롤러에 콜백을 간단히 연결할 수 있습니다.
angular.module('MyApp', [])
.controller('MyCtrl', [function() {
angular.element(document).ready(function () {
document.getElementById('msg').innerHTML = 'Hello';
});
}]);답변
이 게시물 참조 페이지로드에서 각도 컨트롤러 기능을 실행하는 방법은 무엇입니까?
빠른 조회 :
// register controller in html
<div data-ng-controller="myCtrl" data-ng-init="init()"></div>
// in controller
$scope.init = function () {
// check if there is query in url
// and fire search in case its value is not empty
};이렇게하면 문서가 준비 될 때까지 기다릴 필요가 없습니다.
답변
Angular는
DOMContentLoaded이벤트시 또는 angular.js 스크립트가 평가 될 때 document.readyState가 ‘complete’로 설정된 경우 자동으로 초기화됩니다 . 이 시점에서 Angular는 응용 프로그램 루트를 지정하는 ng-app 지시문을 찾습니다.
https://docs.angularjs.org/guide/bootstrap
이는 컨트롤러 코드가 DOM이 준비된 후에 실행됨을 의미합니다.
따라서 그것은 단지 $scope.init()입니다.
답변
Angular에는 함수 실행을 시작하는 몇 가지 시점이 있습니다. jQuery와 같은 것을 찾고 있다면
$(document).ready();이 아날로그가 각도로 매우 유용하다는 것을 알 수 있습니다.
$scope.$watch('$viewContentLoaded', function(){
//do something
});DOM 요소를 조작 할 때 유용합니다. 모든 te 요소가로드 된 후에 만 실행을 시작합니다.
UPD : 위의 내용은 CSS 속성을 변경하려고 할 때 작동합니다. 그러나 너비, 높이 등과 같은 요소 속성을 측정하려는 경우 때때로 작동하지 않습니다.이 경우 다음을 시도 할 수 있습니다.
$scope.$watch('$viewContentLoaded',
function() {
$timeout(function() {
//do something
},0);
});답변
뷰가로드 된 후와 뷰 내의 특정 타사 구성 요소가로드되고 초기화 된 후 $ scope에서 자체에 대한 참조를 지정한 후에 컨트롤러 기능을 실행 해야하는 비슷한 상황이있었습니다. 나를 위해 일한 것은이 스코프 속성에 시계를 설정하고 초기화 된 후에 만 기능을 시작하는 것이 었습니다.
// $scope.myGrid property will be created by the grid itself
// The grid will have a loadedRows property once initialized
$scope.$watch('myGrid', function(newValue, oldValue) {
if (newValue && newValue.loadedRows && !oldValue) {
initializeAllTheGridThings();
}
});감시자는 정의되지 않은 값으로 몇 번 호출됩니다. 그런 다음 그리드가 만들어지고 예상 속성이 있으면 초기화 함수가 안전하게 호출 될 수 있습니다. 정의되지 않은 newValue로 감시자가 처음 호출 될 때 oldValue는 여전히 정의되지 않습니다.
답변
다음은 coffeescript를 사용하는 외부 컨트롤러 내부의 시도입니다. 오히려 잘 작동합니다. settings.screen.xs | sm | md | lg는 앱에 포함 된 미 확대 파일에 정의 된 정적 값입니다. 값은 시사 미디어 쿼리 크기에 대한 Bootstrap 3 공식 중단 점에 따라 다릅니다.
xs = settings.screen.xs // 480
sm = settings.screen.sm // 768
md = settings.screen.md // 992
lg = settings.screen.lg // 1200
doMediaQuery = () ->
w = angular.element($window).width()
$scope.xs = w < sm
$scope.sm = w >= sm and w < md
$scope.md = w >= md and w < lg
$scope.lg = w >= lg
$scope.media = if $scope.xs
"xs"
else if $scope.sm
"sm"
else if $scope.md
"md"
else
"lg"
$document.ready () -> doMediaQuery()
angular.element($window).bind 'resize', () -> doMediaQuery()답변
대답
$scope.$watch('$viewContentLoaded',
function() {
$timeout(function() {
//do something
},0);
});내가 테스트 한 대부분의 시나리오에서 작동하는 유일한 것입니다. 템플릿에서 HTML을 빌드하는 4 가지 구성 요소가 포함 된 샘플 페이지에서 이벤트 순서는 다음과 같습니다.
$document ready
$onInit
$postLink
(and these 3 were repeated 3 more times in the same order for the other 3 components)
$viewContentLoaded (repeated 3 more times)
$timeout execution (repeated 3 more times)따라서 $ document.ready ()는 대부분의 경우 쓸모가 없습니다. 각도로 생성되는 DOM은 거의 준비가되어 있지 않기 때문입니다.
그러나 더 흥미로운 것은 $ viewContentLoaded가 실행 된 후에도 여전히 관심있는 요소를 찾을 수 없었습니다.
$ timeout이 실행 된 후에 만 발견되었습니다. $ timeout의 값이 0 이었지만 실행되기 전에 거의 200 밀리 초가 걸렸으며이 스레드가 꽤 오랫동안 보류되어 있음을 나타냅니다. DOM에는 기본 스레드에 각도 템플릿이 추가 된 것 같습니다. 첫 $ document.ready ()에서 마지막 $ timeout 실행까지의 총 시간은 거의 500 밀리 초였습니다.
구성 요소 값이 설정되고 $ timeout에서 나중에 text () 값이 변경된 특별한 경우 $ timeout 값은 $ timeout 동안 요소를 찾을 수 있었지만 작동 할 때까지 증가해야했습니다. ). 타사 구성 요소 내에서 비동기로 인해 충분한 시간이 지날 때까지 텍스트보다 값이 우선합니다. 다른 가능성은 $ scope. $ evalAsync이지만 시도되지 않았습니다.
나는 여전히 DOM이 완전히 해결되었고 모든 사례가 작동하도록 조작 할 수 있다고 말하는 하나의 이벤트를 찾고 있습니다. 지금까지 임의의 시간 초과 값이 필요합니다. 기껏해야 이것이 느린 브라우저에서 작동하지 않는 kludge임을 의미합니다. 나는 작동 할 수있는 liveQuery 및 publish / subscribe와 같은 JQuery 옵션을 시도하지 않았지만 반드시 순수한 각도는 아닙니다.
