Ng模型不更新控制器值

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.子范围创建了它自己的价值,名称冲突就像这里所说的那样诞生:

有关更多信息,请参阅此视频剪辑:https://www.youtube.com/watch？v = SBwoFkRjZvE&t = 3m15s

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

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或upper的组件

########

老路(不推荐)

建议不要这样做,因为字符串是基元,强烈建议使用对象

在你的标记中试试这个

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

这在你的控制器中

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

Answer 3

在使用AngularJS第19页掌握Web应用程序开发时,编写了这样的内容

避免直接绑定到作用域的属性.绑定到对象属性的双向数据(在作用域上公开)是首选方法.根据经验,您应该在为ng-model指令提供的表达式中有一个点(例如,ng-model ="thing.name").

范围只是JavaScript对象,它们模仿dom层次结构.根据JavaScript Prototype继承,范围属性通过范围分隔.为避免这种情况,点符号应用于绑定ng模型.

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>

编辑:在写这个答案的时候,我的情况要复杂得多.评论之后,我试图重现它,以了解它的工作原理,但没有运气.我想某种方式(不知道为什么)生成一个新的子范围并this引用该范围.但是如果$scope使用它,它实际上是指父$ scope,因为javascript的词法范围功能.

如果遇到此问题的人以这种方式进行测试并通知我们,那就太棒了.

Answer 5

我有同样的问题,这是由于我没有首先在我的控制器顶部声明空白对象:

$scope.model = {}

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

希望这对你有用!

Answer 6

在处理非平凡的视图时(我有嵌套的范围),我遇到了同样的问题.最后发现,由于java脚本基于原型的继承的性质,在开发AngularJS应用程序时这是一个众所周知的棘手问题.AngularJS嵌套作用域是通过此机制创建的.并且从ng-model创建的值被放置在子范围中,而不是说父范围(可能是注入控制器的那个)将看不到该值,如果不使用点,该值也将影响在父范围中定义的具有相同名称的任何属性.强制执行原型引用访问.有关详细信息,请查看特定的在线视频以说明此问题,http://egghead.io/video/angularjs-the-dot/以及后续评论.

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

});

我希望它会有所帮助