在AngularJS中使用$ watch获取用户输入文本在ng-if上不起作用

Question

I have a cross platform app built using AngularJS, Monaca and OnsenUI. 我有一个使用AngularJS，Monaca和OnsenUI构建的跨平台应用程序。

I have a login view that checks if the user has logged in before by querying a SQLite database. 我有一个登录视图，该视图通过查询SQLite数据库检查用户是否已登录。 Based on whether there is data in the database, I display a welcome message to the user OR I display the login text field. 根据数据库中是否有数据，我向用户显示欢迎消息，或者显示登录文本字段。

I have a method that queries the SQLite database and this is working as intended. 我有一个查询SQLite数据库的方法，它按预期工作。 When a entry is found on the database I set a boolean value to display the welcome message - else the boolean displays the login text field. 在数据库上找到条目时，我设置一个布尔值来显示欢迎消息-否则该布尔值将显示登录文本字段。

On my view I do the following; 我认为我要执行以下操作：

<!-- User not in DB  -->
<div ng-if="showLoginUI">                    
    <div class="input">
        <input type="password" placeholder="User ID" ng-model="userID"/>
    </div>
</div>

I watch for changes in the text field to save the user input, but no actions are registered in the example as above. 我监视文本字段中的更改以保存用户输入，但是在上述示例中未注册任何操作。 This is my method to register user action on the text field. 这是我在文本字段上注册用户操作的方法。

$scope.$watch("userID", function (newVal, oldVal)
{
    if (newVal !== oldVal) {
        $scope.newUserID = newVal; // Not getting here
    }
});

However, when I remove the ng-if from the example above - the user events are registered. 但是，当我从上面的示例中删除ng-if时，将注册用户事件。 How do I keep my ng-if while still registering events on the text-filed? 在仍在文本字段上注册事件的同时，如何保持ng-if？

I tried adding a $timeout to my $watch function but this did not help either. 我试图在$ watch函数中添加$ timeout，但这也没有帮助。

Answer 1

It happens because ngIf directive creates a child $scope .. the problem is that you're using ng-model without the Dot Rule or controller-as-syntax . 发生这种情况是因为ngIf指令创建了一个子$scope ..问题是您使用的是ng-model而没有Dot Rule或controller-as-syntax 。

The whole problem was already explained by Pankaj Parkar in this question . Pankaj Parkar已在此问题中解释了整个问题。

So, to make it work, you have to create a new object, ex: 因此，要使其工作，您必须创建一个新对象，例如：

$scope.model = {};

Then, build your ng-model like this: 然后，像这样构建您的ng-model ：

ng-model="model.userID"

Take a look on this simple working demo : 看一下这个简单的工作演示：

 angular.module('app', []) .controller('mainCtrl', function($scope) { $scope.model = {}; $scope.$watch("model.userID", function(newVal, oldVal) { if (newVal !== oldVal) { $scope.model.newUserID = newVal; } }); });

 <html ng-app="app"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script> </head> <body ng-controller="mainCtrl"> <button type="button" ng-click="showLoginUI = !showLoginUI">Hide/Show</button> <div ng-if="showLoginUI"> <div class="input"> <input type="password" placeholder="User ID" ng-model="model.userID" /> </div> </div> <div ng-if="model.newUserID"> <hr> <span ng-bind="'Working: ' + model.newUserID"></span> </div> </body> </html>

在AngularJS中使用$ watch获取用户输入文本在ng-if上不起作用

问题描述

1 个解决方案

解决方案1
2 已采纳 2016-07-19 01:43:53

在AngularJS中使用$ watch获取用户输入文本在ng-if上不起作用

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-07-19 01:43:53

解决方案1
2 已采纳 2016-07-19 01:43:53