初学者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>