2017-12-22 1 views
0

angularJS 응용 프로그램을 사용하여 데이터 바인딩을 수행 할 수 없습니다.각도 js 응용 프로그램에서 데이터 바인딩이 발생하지 않습니다.

다음은 HTML 템플릿 파일이며 databinding.html 및 Javascript 파일은 invoice.js입니다.

John Doe 외에 {{fname}} {{lname}}이 (가) priting됩니다.

<!DOCTYPE html 
<html> 
<head> 
    <title></title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
</head> 
<body> 
    <div ng-app="myApp" ng-controller="InvoiceController"> 
     First Name :<input type="text" ng-model='fname' /><br /> 
     Last Name:<input type="text" ng-model='lname' /><br /> 
     {{ fname }} {{ lname }} 
    </div> 
    <script type="text/javascript" src="invoice.js"></script> 
    <script type="text/javascript" src="angular.min.js"></script> 
</body> 
</html> 

angular.module('myApp', []).controller('InvoiceController', ['$scope', 
function($scope) { 
    $scope.fname = 'John'; 
    $scope.lname = 'Doe'; 
}]); 

답변

2

스크립트의 순서가 잘못되었습니다. 컨트롤러 로직은 어떤 각도가 아직 모르기 때문에 작동하지 않습니다.

변경이이에

<script type="text/javascript" src="invoice.js"></script> 
<script type="text/javascript" src="angular.min.js"></script> 

:

<script type="text/javascript" src="angular.min.js"></script>   
<script type="text/javascript" src="invoice.js"></script> 
+0

당신 탄트 @Harshil 샤. 아래의 angular.min.js에 대한 참조를 invoice.js의 참조로 놓으면, 우리는 angular.min.js와 비교하여 invoice.js에 우선 순위를 부여합니다. 그것이 우리가 기대하길 원하는 결과물을주지 않는 이유입니다. –

+0

@Avdheshsharma 'angular.min.js'를 먼저 넣고 앵귤러 컨트롤러, 서비스 등등의 모든 것들을 AFTER 또는 BELOW 'angular.min.js'스크립트에 넣어야합니다. –

관련 문제