Начинающие 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>