javascript - 控制器中未定义的 Ng-model

Question

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

我想做这个：

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

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

谢谢！

score 10 · Accepted Answer

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

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

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

请参阅plnkr。

score 7 · Accepted Answer

您的第一个示例正在运行，这是一个 plunkr。

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

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

$scope.code = 'my default value';

score 0 · Accepted Answer

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

3 回答 3