NG模型不会更新控制器值

2020/10/08 00:41 · javascript ·  · 0评论

可能是愚蠢的问题,但是我的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 = {};在控制器中定义空对象,瞧……不知道它为什么起作用虽然;]

控制器作为版本(推荐)

这里的模板

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

“如果使用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

在《用AngularJS掌握Web应用程序开发》一书第19页中写道:

避免直接绑定到范围的属性。双向数据绑定到对象的属性(在作用域上公开)是一种首选方法。根据经验,在提供给ng-model指令的表达式中应该有一个点(例如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>

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

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

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

$scope.model = {}

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

希望这对您有用!

在处理非平凡的视图(存在嵌套作用域)时,我遇到了相同的问题。最终发现,由于基于原型的Java脚本继承的特性,这在开发AngularJS应用程序时是一件棘手的事情。AngularJS嵌套作用域是通过这种机制创建的。并且从ng-model创建的值放在子级作用域中,不是说父级作用域(也许是注入控制器的那个)不会看到该值,如果不使用点,该值还将隐藏父级作用域中定义的具有相同名称的任何属性强制执行原型参考访问。有关更多详细信息,请查看专门用于说明此问题的在线视频,http://egghead.io/video/angularjs-the-dot/及其后续评论。

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

我(我想是!)已完全按照您的方式进行了工作,并且似乎正在工作。您可以检查哪些不适用于您吗?

由于没有人提到此问题,因此可以通过添加$parent到bound属性来解决此问题。

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

对我来说,问题是通过将数据存储到一个对象(这里是“数据”)中而解决的。

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

});

我希望这会有所帮助

我使用绑定到body元素的root_controller遇到了这个问题。然后我在角路由器上使用了ng-view。问题在于,当将html插入ng-view元素时,angular ALWAYS始终会创建新的作用域。因此,我的“检查”功能是在由ng-model元素修改的范围的父范围中定义的。

要解决该问题,只需在路由加载的html内容中使用专用控制器即可。

您可以执行以下操作以在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);
        }
    }

我有同样的问题。

正确的方法是将“ searchText”设置为对象内部的属性。

但是,如果我想按原样保留字符串,该怎么办?好吧,我尝试了这里提到的每种方法,但没有任何效果。

但是后来我注意到问题仅在于初始化,因此我只设置了value属性就可以了。

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

这样,将值设置为“ $ scope.searchText”值,并在输入值更改时进行更新。

我知道这是一种解决方法,但对我有用。

我遇到了同样的问题。对我有效的解决方法是使用此关键字。

警报(this.ModelName);

本文地址:http://javascript.askforanswer.com/ngmoxingbuhuigengxinkongzhiqizhi.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!