Question

我正在尝试对输入进行监视以在每次更改时执行某些功能。但是，此输入在加载页面时具有值（在此实例中，它使用用户的电子邮件地址加载）：

<input type="email" name="email" value="user@example.com" ng-model="email">

然后，在我的表单控制器中：

$scope.$watch('email', function(newValue, oldValue) {
    console.log('Email address has been changed.');
    console.log('Old value: ', oldValue);
    console.log('New value: ', newValue);
}, true);

在页面加载时，以上三行是控制台注销的，oldValue和newValue都未定义。然后，表单字段留空。

如何让Angular保留输入的现有值，而不是在附加手表时不用任何内容替换它？

Answer 1

问题不在于您的手表。问题是这不是角度的预期用途。这是正确的程序。

app.controller('myCtrl', function($scope) {
  $scope.email = 'user@example.com';
});

数据绑定本身正在删除你的值，它正在用$ scope.email的值替换它，就像它应该的那样。

如果你必须从输入字段本身获取值，那么你需要在控制器加载之前缓存该值。控制器本身会导致问题。

Here's an example - click（注释掉cachedValue和$scope.email，看看控制器/ ng模型会将您的值清空。

最干净的解决方案是不使用ng-model，而是创建自己的指令，将初始值设置为$ scope，然后应用ng-model，从而按预期更新。

我很无聊所以我写了指令。

app.directive('initModel', function($compile) {
  return {
    link: function(scope, element, attrs) {
      scope[attrs.initModel] = element[0].value;
      element.attr('ng-model', attrs.initModel);
      element.removeAttr('init-model');
      $compile(element)(scope);
    }
  };
});

<input type="email" name="email" value="user@example.com" init-model="email">

Demo here (click).

在Angular中观察模型而不替换它的初始值

1 个答案: