2017-12-22 8 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シャーこの

変更。 angle.min.jsの参照をinvoice.jsの参照に置くと、angular.min.jsと比較してinvoice.jsの方が優先されます。それが私たちが期待したいと思うような出力を出さないのはなぜですか? –

+0

@Avdheshsharma 'angular.min.js'を最初に入れてください。角度コントローラーやサービスなどのすべてのものは、AFTERまたはBELOWの 'angular.min.js'スクリプトに入れてください。 –

関連する問題