角度js应用程序中没有发生数据绑定

时间:2017-12-22 20:40:39

标签: javascript html angularjs

我无法使用angularJS应用程序进行数据绑定。

以下是作为databinding.html的HTML模板文件和作为invoice.js的Javascript文件。

除了John Doe之外,它还是{{fname}} {{lname}}。

<!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';
}]);

1 个答案:

答案 0 :(得分: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>