初學者AngularJS代碼不按預期方式工作

Question

我是AngularJS的新手，只是玩弄東西。這是我的HTML：

<div ng-app ng-controller="nameController"> 
    <input type="text" value="Jack" ng-model="fname" /> 
    <input type="text" value="Sparrow" ng-model="lname" /> 
    {{getFullName()}} 
</div> 

<input type="text" value="Hello" /> 

這裏是控制器代碼：

function nameController($scope) { 
    $scope.getFullName = function() { 
     return $scope.fname + " " + $scope.lname; 
    }; 
} 

我已經設置使用value屬性輸入文本字段的值。所以我期望控制器功能getFullName讀取這些值並在頁面加載時返回全名。但我得到的是：

undefined undefined 

而輸入文本框爲空。爲什麼這樣？

Answer 1

如果你想對這些輸入的默認值，使用模型和控制器將它們設置爲性能上$scope：

function nameController($scope) { 
    $scope.fname = "Jack"; 
    $scope.lname = "Sparrow"; 
    $scope.getFullName = function() { 
     return $scope.fname + " " + $scope.lname; 
    }; 
} 

您可以然後將其刪除標記的value屬性。這使得數據很好地與視圖分開。這是一個working example。

或者，你可以使用ngInit指令：

<div ng-app ng-controller="nameController" ng-init="fname = 'Jack'; lname = 'Sparrow'"> 
    <input type="text" ng-model="fname" /> 
    <input type="text" ng-model="lname" /> 
    {{getFullName()}} 
</div>