Question

在HTML中我有这行代码：

 <input type="text" class="training-comment" placeholder="Enter comment" ng-model="content" data-ui-keypress="{13:'keypressCallback($event)'}">

在控制器中：

$scope.keypressCallback = function ($event) {
    console.log("comment is", $scope.content);
    $event.preventDefault();
};

当我在输入中输入一些文本并在控制台中输入时，我看到$ scope.content未定义。

为什么会这样？

Answer 1

我使用Angular UI组合Plunker example here并基本上复制了问题中的代码。然后我拿了这个例子并添加了一个ng-repeat来演示我见过的最常见问题之一：范围问题：

<div ng-repeat="x in collections">
  <input type="text" class="training-comment" placeholder="Enter comment"
ng-model="content" data-ui-keypress="{13:'keypressCallback($event)'}" />
  <br /><br />
</div>

您可以找到此updated plunker example here。基本上，无论何时使用ng-repeat或任何其他创建新范围的指令，您的模型都存在于该范围内 - 而不是父范围或根范围。这意味着您的代码可能正在运行，但它正在从错误的范围打印出值！有关范围的更多信息，请参阅angular documentation here。

要使用plunker演示，请键入第一个输入并按enter键，模型将更新。但是，如果你键入其他两个框中的任何一个，模型将不会被更新，或者它将是undefined（如果你从未输入第一个框）。

即使这不是确切的问题，希望它仍然有用。祝你好运！

Angularjs ng-model未定义

1 个答案: