控制器中的Ng模型未定义

Question

我遇到了一些＆＃34;问题＆＃34;从控制器读取ng模型。

我想这样做：

<input type="text" ng-model="code">
<button ng-click="setCode()">Login</button>

在我的控制器中访问该变量：

 $scope.setCode = function(){
    alert($scope.code);
  }

这就是我想做的，但我的代码变量未定义。

我找到了两种让它发挥作用的方法：

1）将变量作为参数传递

<input type="text" ng-model="code">
<button ng-click="setCode(code)">Login</button>

和

$scope.setCode = function(code){
    alert(code);
  }

2）将我的变量声明为对象

<input type="text" ng-model="code.text">
<button ng-click="setCode()">Login</button>

和

$scope.code = {text: 'foo'};

[...]

$scope.setCode = function(){
    console.log($scope.code);
  }

（我更喜欢第二个）

但是我对自己应该做的事感到有些困惑。可以将我的ng模型声明为对象吗？我必须声明我的所有模型都像对象一样吗？

---

编辑：Here is a Plnkr of the problem

在这个例子中（我正在使用Ionic框架），我声明了一个带有值test的变量代码，当我在输入中更改模型并按下Start按钮时，理论上我必须看到提醒模型的新值。但我看到的是旧的。

谢谢！

Answer 1

我使用对象模型而不是基本类型修复了plnkr示例。

$scope.model = {};
$scope.model.code = "test";

$scope.setCode = function(){
    alert($scope.model.code);
}

请参阅plnkr。

Answer 2

你的第一个例子正在运作，here is a plunkr。

如果您点击按钮而未在输入字段中输入任何文字，则会收到提醒undefined。在您向其绑定字段$scope.code输入内容时，ng-model="code"会被定义。

您也可以在控制器中将其初始化为默认值：

$scope.code = 'my default value';

Answer 3

Ionic的指令将创建新范围，如果要直接在控制器中使用代码对象，则必须将ng-controller设置为HTML页面中的离子内容，而不是路由器状态