2014-02-22 4 views
0

컨트롤러에 초기화 코드가있는 anglejs 앱을 부클 래핑하는 데 문제가 있습니다. 단순화 된 테스트 케이스는이 (하는 index.js)과 같다 :동적으로 AngularJS 앱을 부트 스트랩

var myApp = angular.module('myApp', []); 

myApp.controller('myAppController', [ '$scope', function($scope) { 
    console.log('never shown'); 
    $scope.test = 'constructor called'; 
    // removed more init code 
}]); 

$(document).ready(function(){ 
    angular.bootstrap(document, ['myApp']); 
    console.log('Finished boostrapping.'); 
}); 

이 테스트 케이스에 대한 HTML 파일 :

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8" /> 
     <title>TeST</title> 
    </head> 
    <body> 
     {{test}} 
     <script type="text/javascript" src="js/bower_components/jquery/dist/jquery.min.js"></script> 
     <script type="text/javascript" src="js/bower_components/angular/angular.js"></script> 
     <script type="text/javascript" src="js/index.js"></script> 
    </body> 
</html> 

결과는 "부트 스트랩 완료"말한다 콘솔 출력 - 제어기 기능은 호출되지 않습니다. ..이게 나를 당황하게하지만, 이것은 내 첫 1.2 각도 앱이다. 나는 동일한 결과를 얻는다. 만약 ng-app = "myApp"를 태그에 넣고 자동적으로 어플리케이션을 앵글 부트 스트랩하게 만들면. ...

답변

1

마크 업에서 ng-controller를 절대 설정하지 마십시오.

또한 스크립트 태그를 머리에 넣거나 </body> 뒤에 넣어야합니다.

편집 :이 방법으로 부트 스트랩을 사용할 때 <script> 태그의 배치가 중요합니다.

+0

글쎄 컨트롤러를 설정하지 않았지만, 전체적인 점은 페이지가로드 된 후 앱이 동적으로 부 풀리됩니다. 컨트롤러는 .controller (..) 호출로 설정해야합니다. docs.angularjs.org에 http://docs.angularjs.org/guide/controller 문서를 확인했는데 그 예제는 내 것과 아주 비슷해 보입니다. –

+0

@MrMT ng-app의 기능은 ng-controller와 완전히 다릅니다. 않습니다. 이 예에서 ng-controller가 있기 때문에 해당 링크의 설명서를 다시 검토해야합니다. 부트 스트랩은 ng-app를 설정합니다. – thescientist

+0

... 스크립트가 인 경우 차이가 발생해야합니다. 난 그냥 두 번 확인해 봤어 - 아무런 차이가 없어 ...하지만 너는 에 ng-controller를 넣으면 모든 것이 실제로 작동한다. 고마워! –

0

angular.bootstrap 메소드의 첫 번째 매개 변수는 요소입니다. 현재 요소가 아닌 문서를 전달 중입니다.

Try 
    angular.bootstrap(document.documentElement, ['myApp']); 
or 
    angular.bootstrap(document.body, ['myApp']); 
+0

문제가되어서는 안됩니다. http://stackoverflow.com/questions/16537783/which-method-should-i-use-to-manually-bootstrap-my-angularjs – thescientist

+0

글쎄, 그건 도움이되지 않았지만, ng-controller = "myAppController"를 에 입력하면 모든 것이 작동하기 시작했다. –

관련 문제