Ng 模型不更新控制器值

javascript angularjs data-binding angular-ngmodel

2022-08-30 00:15:40

可能是愚蠢的问题，但我有我的html表单与简单的输入和按钮：

<input type="text" ng-model="searchText" />
<button ng-click="check()">Check!</button>
{{ searchText }}

然后在控制器中（模板和控制器从 routeProvider 调用）：

$scope.check = function () {
    console.log($scope.searchText);
}

为什么单击按钮时，我在控制台中看到视图已正确更新，但未定义？

谢谢！

更新：似乎我实际上已经解决了这个问题（之前不得不想出一些解决方法）：只需要将我的属性名称从更改为，然后在控制器中定义空对象，瞧...不知道为什么它正在工作;]searchTextsearch.text$scope.search = {};

答案 1

“如果你使用ng-model，你必须有一个点。
让你的模型指向一个 object.property，你就会很高兴。

控制器

$scope.formData = {};
$scope.check = function () {
  console.log($scope.formData.searchText.$modelValue); //works
}

模板

<input ng-model="formData.searchText"/>
<button ng-click="check()">Check!</button>

当子作用域正在播放时（如子路由或 ng 重复），就会发生这种情况。子范围创建它自己的值，并诞生名称冲突，如下所示：

请参阅此视频剪辑以获取更多信息：https://www.youtube.com/watch?v=SBwoFkRjZvE&t=3m15s

答案 2

控制器作为版本（推荐）

这里模板

<div ng-app="example" ng-controller="myController as $ctrl">
    <input type="text" ng-model="$ctrl.searchText" />
    <button ng-click="$ctrl.check()">Check!</button>
    {{ $ctrl.searchText }}
</div>

The JS

angular.module('example', [])
  .controller('myController', function() {
    var vm = this;
    vm.check = function () {
      console.log(vm.searchText);
    };
  });

例如：http://codepen.io/Damax/pen/rjawoO

最好是使用具有 Angular 2.x 或 Angular 1.5 或上部的组件。

########

旧方法（不推荐）

不建议这样做，因为字符串是基元，强烈建议改用对象

在标记中尝试此操作

<input type="text" ng-model="searchText" />
<button ng-click="check(searchText)">Check!</button>
{{ searchText }}

并在您的控制器中

$scope.check = function (searchText) {
    console.log(searchText);
}