각도 j를 사용하는 단일 파일의 다중 컨트롤러

저는 각도 JS의 초보자입니다. 컨트롤러에 대해 작업하고 있습니다. 다음 스크립트를 생성했습니다.각도 j를 사용하는 단일 파일의 다중 컨트롤러

<!DOCTYPE html> 
<html> 
<head> 
    <title>just learnin!</title> 
</head> 
<body> 
    <div data-ng-app="clock" data-ng-controller="zerocontroller"> 
     <h2>Readable time is {{timeview.hour}}:{{timeview.min}}:{{timeview.sec}}</h2> 
    </div> 
    <div class="first" data-ng-app="justin" data-ng-controller="mycontrol"> 
     <h1>Name is {{k}}</h1> 
    </div> 
<script type="text/javascript" src="angular.min.js"></script> 
<script> 
    var just=angular.module('justin',[]); 
    just.controller('mycontrol',function($scope){ 
     $scope.k="Harvey"; 
    }); 

    var clock=angular.module('clock',[]); 
    clock.controller('zerocontroller',function($scope){ 
     $scope.time=new Date(); 
     $scope.timeview={hour:0,min:0,sec:0}; 
     var update=function(){ 
     $scope.time=new Date(); 
     $scope.timeview.hour=$scope.time.getHours(); 
     $scope.timeview.min=$scope.time.getMinutes(); 
     $scope.timeview.sec=$scope.time.getSeconds(); 
     }; 
     setInterval(function(){$scope.$apply(update)},1000); 
    }); 
</script> 
</body> 
</html>

문제는 DOM에서 발생하는 첫 번째 컨트롤러는 즉 를 작동하고 현재 O/p는 점이다

Readable time is 15:55:36 

Name is {{k}}

그러나 나는 이것으로이

<div data-ng-app="clock" data-ng-controller="zerocontroller"> 
     <h2>Readable time is {{timeview.hour}}:{{timeview.min}}:{{timeview.sec}}</h2> 
    </div>

를 교환 할 때

<div class="first" data-ng-app="justin" data-ng-controller="mycontrol"> 
     <h1>Name is {{k}}</h1> 
     </div>

오는/p는

출처

2014-09-27 sid

당신은 단지 HTML 파일에서 한 ng-app를 정의 할 수 있습니다 내가 잘못이 무엇인지 알아낼 수 아니다

Name is Harvey 

Readable time is {{timeview.hour}}:{{timeview.min}}:{{timeview.sec}}

된다. Duplicate ng-app 선언은 지원되지 않습니다. 당신이하고있는 일은 body 또는 html 태그에 ng-app를 넣음으로써 이루어질 수 있습니다 : <body ng-app="app"> 다른 모든 ng-app 선언을 제거하십시오.

이제 모든 모듈을 하나의 모듈에 둘 수 있습니다. app. 또는 여러 개의 모듈을 만들고 루트 모듈 app 등의 종속성으로 추가 할 수 있습니다 :

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

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

var main=angular.module('app', ['justin','clock']);

업데이트 : 우리는 HTML에서 여러 NG-응용 프로그램을 지원하려는 경우, @nico 지적, 우리 angular.bootstrap API를 사용하여 수동으로 부트 스트랩해야합니다. 예를 들어 SO post을 참조하십시오.

출처

2014-09-27 10:55:24 Chandermani

나는 틀렸다고 생각합니다. 각도 샘플 페이지에는 여러 개의 앱이 사용되며 수동 부트 스트랩을 사용하는 경우에는 문제가되지 않습니다. 그렇지 않으면 페이지에 하나의 앱만 작동합니다. – Nico

맞습니다. 수동 부트 스트랩 프로세스에 대해서는 생각하지 않았습니다. 그렇게 일반적인 것은 아닙니다. 나는 나의 대답을 업데이트 할 것이다. – Chandermani

@Chandermani는 이것을 효과적으로 배울 수있는 책이나 사이트를 제안 할 수 있습니까? – sid

이전 답변에 대한 의견을 말하십시오.

자동 부팅 스트랩을 사용하면 단일 페이지에서 여러 ng-app를 사용할 수 없습니다. 하지만. 마크 업에서 ng-app (또는 data-ng-app)를 제거하고 각도 앱을 수동으로 시작하십시오.

그것은 다음과 같습니다

angular.bootstrap ('프로그램 응용', document.getElementById를 ('yourAppBlockId를')).

두 번째 args에 대해서는 확실하지 않지만 각도 문서를 살펴보면 도움이 될 것입니다.

출처

2014-09-27 15:40:49 Nico

각도 j를 사용하는 단일 파일의 다중 컨트롤러

답변

관련 문제