控制器中未定义的 Ng-model答案

【问题标题】：Ng-model undefined in the controller控制器中未定义的 Ng-model
【发布时间】：2014-03-31 13:23:59
【问题描述】：

我在从控制器读取 ng-model 时遇到一些“问题”。

我想这样做：

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

在我的控制器中访问该变量，如下所示：

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

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

我找到了 2 种方法来实现这一点：

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 模型吗？我必须像对象一样声明我的所有模型？

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

谢谢！

【问题讨论】：

【解决方案1】：

我使用对象模型而不是原始类型修复了您的 plnkr 示例。

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

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

请参阅plnkr。

【讨论】：

谢谢！我遇到了与 OP 类似的问题，您的方法解决了它。您知道为什么 OP 的代码在 Erik 的回答中作为评论分享的 plnkr 中不起作用吗？
@TadDonaghe 你可以查看讨论here。我对 ionic-framework 不熟悉，但我认为label 和button 标签会在这里引入新的作用域，这样我们就只能使用非原始对象来传递引用。

【解决方案2】：

您的第一个示例正在运行，here is a plunkr。

如果您在未在输入字段中输入任何文本的情况下点击按钮，则会收到警报 undefined。 $scope.code 在您在其绑定字段ng-model="code" 中输入内容时被定义。

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

$scope.code = 'my default value';

【讨论】：

【解决方案3】：

Ionic 的指令会创建新的作用域，如果你想直接在控制器中使用 code 对象，你必须在你的 HTML 页面中将 ng-controller 设置为 ion-content，而不是路由器状态.

【讨论】：