控制器中的Ng模型未定义

Question

我有一些"问题"从控制器读取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模型声明为对象吗？我必须声明我的所有模型都像对象？

---

编辑:这是一个问题的Plnkr

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

谢谢!

Answer 1

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

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

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

见plnkr.

Answer 2

你的第一个例子是工作,这是一个plunkr.

如果您在没有在输入字段中输入任何文本的情况下点击按钮,则会收到警报undefined.$scope.code在您向其边界字段输入内容时获得定义ng-model="code".

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

$scope.code = 'my default value';