Ng型不更新控制器值
大概愚蠢的问题,但我有我简单的input和button的HTMLforms:
<input type="text" ng-model="searchText" /> <button ng-click="check()">Check!</button> {{ searchText }}
然后在控制器(模板和控制器从routeProvider调用):
$scope.check = function () { console.log($scope.searchText); }
为什么我看到视图正确更新,但在控制台中未定义点击button?
谢谢!
更新:似乎我已经解决了这个问题(之前必须提出一些解决方法):只需要将我的属性名称从$scope.search = {};
更改为search.text
,然后定义空的$scope.search = {};
在控制器中的对象,并瞧…不知道为什么它的工作虽然;]
控制器的版本(推荐)
这里的模板
<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或更高版本的组件
########
旧的方式(不推荐)
这是不推荐的,因为一个string是一个原始的,强烈build议使用一个对象
试试这个在你的标记
<input type="text" ng-model="searchText" /> <button ng-click="check(searchText)">Check!</button> {{ searchText }}
这在你的控制器
$scope.check = function (searchText) { console.log(searchText); }
“如果你使用ng模型,你必须在那里有一个点。”
让你的模型指向一个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-repeat。 子范围创造了自己的价值,名称冲突的诞生如下所示 :
查看更多的video片段: https : //www.youtube.com/watch?v=SBwoFkRjZvE&t=3m15s
在使用AngularJS第19页掌握Web应用程序开发的时候,写道:
避免直接绑定到作用域的属性。 双向数据绑定到对象的属性(暴露在范围)是一个首选的方法。 作为一个经验法则,你应该在提供给ng-model指令的expression式中有一个点(例如,ng-model =“thing.name”)。
范围只是JavaScript对象,并且它们模仿dom层次结构。 根据JavaScript Prototype Inheritance ,范围属性通过范围分开。 为了避免这种情况, 点符号应该用来绑定ng模型。
使用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>
我有同样的问题,这是由于我没有首先在我的控制器的顶部宣布空白对象:
$scope.model = {} <input ng-model="model.firstProperty">
希望这会对你有用!
处理一个不平凡的视图时,我遇到了同样的问题(有嵌套的作用域)。 最后发现,由于Java脚本基于原型的inheritance性质,在开发AngularJS应用程序时这是一件已知的棘手的事情。 AngularJS嵌套作用域是通过这个机制创build的。 从ng-model创build的值被放置在子范围内,而不是说父范围(可能是注入到控制器中的)不会看到该值,如果不使用点,该值也会影响父范围中定义的具有相同名称的任何属性执行原型参考访问。 有关详细信息,请查看具体的在线video以说明此问题, http://egghead.io/video/angularjs-the-dot/以及后续注释。;
看看这个小提琴http://jsfiddle.net/ganarajpr/MSjqL/
我有(我假设!)完成了你正在做的事情,似乎正在工作。 你能检查什么不在这里为你工作?
对于我来说,这个问题是通过将我的数据放入一个对象(这里是“数据”)来解决的。
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' } });
由于没有人提到这个问题可以通过添加$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! }; }]);
我刚刚有一个使用root_controller绑定到body-element的问题。 然后我用angular度路由器使用ng-view。 问题是angular ALWAYS在将html插入到ng-view元素中时会创build一个新的作用域。 因此,我的“检查”函数被定义在由我的ng-model元素修改的范围的父范围中。
要解决这个问题,只需要在路由加载的html内容中使用一个专用的控制器。
你可以做到这一点,以启用searchng-keypress
input文本和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); } }
我有同样的问题。
正确的方法是将“searchText”设置为对象内的属性。
但是,如果我想离开它,一个string呢? 好吧,我尝试了这里提到的每一个方法,没有任何工作。
但后来我注意到问题只是在启动,所以我刚刚设置了价值属性,它的工作。
<input type="text" ng-model="searchText" value={{searchText}} />
这样,值就被设置为“$ scope.searchText”的值,并且在input值改变时被更新。
我知道这是一个解决方法,但它为我工作..