离子 ngModel 指令不更新控制器中的 $scope.属性值

Question

我定义了以下离子模板：

<ion-view view-title="Home" hide-nav-bar="true">
<ion-content class="padding">
<label class="item item-input">
<input type="text" placeholder="Enter Name" ng-model="name">
</label>
<button class="ion-plus-circled button button-block button-positive" ng-click="add()" side="right">
Add Name
</button>
</ion-content>
</ion-view>

我的控制器如下所示：

//home controller
.controller('HomeCtrl',['$scope','$log',
function($scope,$log){
$scope.name = null;
$scope.add = function(){  
var name = $scope.name;
if(name != null && name != undefined){
$log.debug('participant added to list:' + name);
}else{
//notify the user that they must enter a valid name
$log.debug('user entered invalid name');
}
};
}])

当在$scope上调用add()时，$scope.name值为空。

因此，上面的代码和标记将导致记录以下内容。

user entered invalid name

为什么它不从文本框中选取值？

Answer 1

使用以下代码：

目录：

<button class="ion-plus-circled button button-block button-positive" ng-click="add(name)" side="right">
Add Name
</button>

控制器：

$scope.add = function(name){  
if(name != null && name != undefined){
$log.debug('participant added to list:' + name);
}else{
//notify the user that they must enter a valid name
$log.debug('user entered invalid name');
}
};

或：

.html：

<input type="text" placeholder="Enter Name" ng-model="obj.name">

控制器：

$scope.add = function(){  
var name = $scope.obj.name;
if(name != null && name != undefined){
$log.debug('participant added to list:' + name);
}else{
//notify the user that they must enter a valid name
$log.debug('user entered invalid name');
}
};