프로그래밍 방식으로 ng- * HTML 속성을 다양한 DOM 요소에 추가하려고합니다. $compile(obj)($scope);을 사용하여 약간의 성공을 거두었지만이 2 차 컴파일은 여러 구성 요소와 관련된 문제를 일으 킵니다.Angular가 실행되기 전에 Javascript 코드를 실행할 수있는 방법이 있습니까?
jQuery ...를 통해 ng- * 속성을 추가하고 ... 지시어을 알고 싶지만 ng- * HTML 속성이 나를 기반으로하는 상용구 작업이므로 나를 위해 작동하지 않습니다. DOM 구조. jQuery DOM 조작과 비교할 때 그와 지시어는 어색한 듯하다.
그래서 ...이 보일러 플레이트 ng- * HTML 속성에 추가 할 수있는 방법이 있습니까? Angle을 실행하기 전에 다시 $compile을 피할 수 있습니까? 제가 정말 좋아할만한 것은 Angular에서 pre-init hook을 만드는 방법입니다, 그런 짐승이 있습니까?
가 해결책 :
@ChrisMartin이 질문에 대한 답을 알아 내기 위해 옳은 길에 나를 보내 (감사 크리스!).
: 내가하고 결국은 나는 다음과 같은 코드로 "angular.js"전에 포함되어 "각도 - 연기 - bootstrap.js"라는 이름의 파일을 만든이 ...우선이다
//# Set the window.name to signal Angular to delay bootstrapping until `angular.resumeBootstrap()` is called.
//# See: http://stackoverflow.com/a/21049890/235704 and https://docs.angularjs.org/guide/bootstrap
//# NOTE: This MUST be included BEFORE angular*.js
window.name = 'NG_DEFER_BOOTSTRAP! ' + window.name;
//####################
//# Setup the jQuery onDocumentLoad event to handle the pseudo-ng-directive of ng-preinit
//####################
$(document).ready(function() {
var $this, $pre = $('[ng-preinit]');
//# If we have some [ng-preinit]'s to process
if ($pre.length > 0) {
//# Traverse the [ng-preinit] attributes, eval'ing/running each and removing them so Angular doesn't freak out
$pre.each(function() {
$this = $(this);
eval($this.attr('ng-preinit'));
$this.removeAttr('ng-preinit');
});
}
//# Let Angular know it can .resumeBootstrap and remove the flag from window.name
angular.resumeBootstrap();
window.name = window.name.replace('NG_DEFER_BOOTSTRAP! ', '');
});
이이어서 포함하여 이용 ng-preinit 의사 각도 지침/HTML 속성을 uding :
<div class="row" ng-controller="IndexController" ng-init="init()" ng-preinit="globalScope.preinit()">
여기서 마찰이 의사 각도 지시 ng-preinit에 포함 된 eval 'D 코드가 아니라 각 컨트롤러의 $scope보다 글로벌 범위를 가지고 있다는 것입니다.
이 몇 줄의 코드를 사용하여 Angular의 "pre-init"(즉, 사전 부트 스트랩)을 깨끗하게 후크 할 수 있으며 다시 쓸 필요없이 무엇이든 할 수 있습니다. $compile (의도하지 않은 결과 임) , 어느 쪽이 정확하게 내가 원했던 것이다!