Question

我有一个使用AngularJS，Monaca和OnsenUI构建的跨平台应用程序。

我有一个登录视图，通过查询SQLite数据库来检查用户之前是否已登录。根据数据库中是否有数据，我向用户显示欢迎消息或显示登录文本字段。

我有一个查询SQLite数据库的方法，这是按预期工作的。当在数据库中找到条目时，我设置一个布尔值来显示欢迎消息 - 否则布尔值显示登录文本字段。

在我看来，我会做以下事情;

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

我注意文本字段中的更改以保存用户输入，但是上面的示例中没有注册任何操作。这是我在文本字段中注册用户操作的方法。

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

但是，当我从上面的示例中删除ng-if时，会注册用户事件。如何在文本文件中注册事件时保留ng-if？

我尝试在我的$ watch函数中添加$ timeout，但这也无济于事。

Answer 1

这是因为ngIf指令会创建一个子$scope ..问题是您在没有ng-model或Dot Rule的情况下使用controller-as-syntax

Pankaj Parkar已在question中解释了整个问题。

因此，要使其工作，您必须创建一个新对象，例如：

$scope.model = {};

然后，像这样建立你的ng-model：

ng-model="model.userID"

看看这个简单的工作演示：

＆＃13;

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

＆＃13;

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

＆＃13;

使用AngularJS中的$ watch获取用户输入文本不能用于ng-if

1 个答案: