git에서 seed 프로젝트를 다운로드했습니다. 기본적으로 다음 세 파일에서 코드를 변경했습니다.
app.js
angular.module('app', []);
index.html
<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
</head>
<body ng-controller="MessageController">
<div class="container">
<h1>{{title}}</h1>
</div>
</body>
</html>
MessageController.js
angular.module('app').controller("MessageController",function(){
alert("inside message controller");
var vm = this;
vm.title = 'AngularJS Tutorial Example';
});
http : // localhost : 8000 / app / index.html 실행하면 {{title}}컨트롤러 내부의 값이 아니라 표시됩니다 .
나는 각도에서 초보자이고 배우려고 노력하지만 여기서 무엇이 잘못되었는지 알아낼 수 없습니다.
두 가지 다른 일이 일어나는 것 같습니다.
먼저 html 파일에 javascript 종속성을 추가하지 못한 것 같습니다.
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="app.js"></script>
<script src="MessageController.js"></script>
</head>
추가 참고 사항
여러 파일을 사용하고 있기 때문에 (괜찮음) app.js파일 앞에 파일 을 포함해야 MyController.js합니다.
또한 범위에 올바르게 액세스해야합니다. 자바 스크립트 종속성을 추가하더라도 올바르게 바인딩되지 않으면 빈 페이지가 표시됩니다.
var vm = this;형식을 사용하고 있기 때문에 컨트롤을 주석으로 사용해야합니다.
<body ng-controller="MessageController as myctrl">
<div class="container">
<h1>{{myctrl.title}}</h1>
</div>
</body>
또 다른 옵션은 $scope컨트롤러에서 직접 확장 하는 것입니다. 그런 다음 {{title}}페이지에 있을 수 있으며 올바르게 바인딩되어야합니다.
angular.module('app').controller("MessageController",['$scope',function($scope){
alert("inside message controller");
$scope.title = 'AngularJS Tutorial Example';
}]);
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다