ng-model 不更新控制器值

Question

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

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

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

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

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

谢谢！

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

Answer 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-repeats。 子作用域创建了它自己的值并产生了名称冲突as illustrated here：

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

Answer 2

Controller as 版本（推荐）

这里是模板

<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>

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);
}

Answer 3

在 Mastering Web Application Development with AngularJS book p.19 中写到

避免直接绑定到作用域的属性。双向数据绑定到 对象的属性（暴露在范围上）是一种首选方法。作为一个 根据经验，您应该在提供给 ng-model 指令（例如，ng-model="thing.name"）。

作用域只是 JavaScript 对象，它们模仿 dom 层次结构。根据JavaScript Prototype Inheritance，范围属性通过范围分隔。为避免这种情况，dot notation 应该用于绑定 ng-models。

Answer 4

使用this 代替$scope 有效。

function AppCtrl($scope){
  $scope.searchText = "";
  $scope.check = function () {
    console.log("You typed '" + this.searchText + "'"); // used 'this' instead of $scope
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app>
  <div ng-controller="AppCtrl">
    <input ng-model="searchText"/>
    <button ng-click="check()">Write console log</button>
  </div>
</div>

编辑：在写这个答案的时候，我的情况比这复杂得多。在 cmets 之后，我试图重现它以了解它为什么起作用，但没有运气。我认为以某种方式（不知道为什么）生成了一个新的子范围，this 指的是该范围。但是如果使用$scope，由于javascript的lexical scope特性，它实际上是指父$scope。

如果有人以这种方式测试并通知我们，那就太好了。

Answer 5

我遇到了同样的问题，这是因为我没有先在控制器顶部声明空白对象：

$scope.model = {}

<input ng-model="model.firstProperty">

希望这对你有用！

Answer 6

在处理非平凡视图（存在嵌套范围）时，我遇到了同样的问题。最后发现，由于 java-script 的基于原型的继承性质，在开发 AngularJS 应用程序时这是一个已知的棘手事情。 AngularJS 嵌套范围是通过这种机制创建的。并且从 ng-model 创建的值被放置在子作用域中，并不是说父作用域（可能是注入控制器的那个）不会看到该值，如果不使用点，该值还将隐藏在父作用域中定义的任何同名属性强制执行原型引用访问。有关详细信息，请查看专门用于说明此问题的在线视频，http://egghead.io/video/angularjs-the-dot/ 和 cmets 跟进。

Answer 7

看看这个小提琴http://jsfiddle.net/ganarajpr/MSjqL/

我已经（我假设！）完全按照您正在做的事情做，而且它似乎正在工作。你能检查一下这里不适合你吗？

Answer 8

由于没有人提到这一点，可以通过将$parent 添加到绑定属性来解决问题

<div ng-controller="LoginController">
    <input type="text" name="login" class="form-control" ng-model="$parent.ssn" ng-pattern="/\d{6,8}-\d{4}|\d{10,12}/" ng-required="true" />
    <button class="button-big" type="submit" ng-click="BankLogin()" ng-disabled="!bankidForm.login.$valid">Logga in</button>
</div>

还有控制器

app.controller("LoginController", ['$scope', function ($scope) {
    $scope.ssn = '';

    $scope.BankLogin = function () {
        console.log($scope.ssn); // works!
    };
}]);

Answer 9

对我来说，问题是通过将我的数据存储到一个对象（这里是“数据”）中来解决的。

NgApp.controller('MyController', function($scope) {

   $scope.my_title = ""; // This don't work in ng-click function called

   $scope.datas = {
      'my_title' : "",
   };

   $scope.doAction = function() {
         console.log($scope.my_title); // bad value
         console.log($scope.datas.my_title); // Good Value binded by'ng-model'
   }
   

});

我希望它会有所帮助

Answer 10

我刚刚使用绑定到 body-element 的 root_controller 遇到了这个问题。然后我将 ng-view 与角度路由器一起使用。问题是 Angular 总是在将 html 插入 ng-view 元素时创建一个新范围。因此，我的“检查”函数是在由我的 ng-model 元素修改的范围的父范围上定义的。

要解决这个问题，只需在路由加载的 html 内容中使用专用控制器。

Answer 11

您可以这样做以在 ng-keypress 中启用搜索输入文本并在 ng-click 中搜索图标：

<input type="text" ng-model="searchText" ng-keypress="keyEnter(this,$event)" />
<button ng-click="check(searchText)">Check!</button>

in the controller
$scope.search = function (searchText) {
        console.log(searchText);
    }
    $scope.keyEnter = function (serachText,$event) {
        var keyCode = $event.which || $event.keyCode;
        if (keyCode === 13) {//KeyCode for Enter key
           console.log(searchText);
        }
    }

Answer 12

我遇到了同样的问题。
正确的方法是将“searchText”设置为对象内的属性。

但是如果我想保持原样，一个字符串呢？好吧，我尝试了这里提到的每一种方法，但没有任何效果。
但是后来我注意到问题只是在启动中，所以我只是设置了 value 属性并且它起作用了。

<input type="text" ng-model="searchText" value={{searchText}} />

这样，该值只是设置为 '$scope.searchText' 值，并在输入值更改时更新。

我知道这是一种解决方法，但它对我有用..

Answer 13

我遇到了同样的问题... 对我有用的解决方案是使用这个关键字............

alert(this.ModelName);

Answer 14

为表单控件提供名称属性