0

我试图在输入上放置一个手表，以便在每次更改时执行一些功能。然而，这个输入在页面加载时有一个值（在这个例子中，它是用用户的电子邮件地址加载的）：

<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 保持输入的现有值，而不是在附加手表时将其替换为任何内容？

4

1 回答 1

2

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

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

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

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

这是一个示例 - 单击（注释掉cachedValueand$scope.email以查看控制器/ng-model 将清除您的值）。

最干净的解决方案是不使用 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">

演示在这里（点击）。

于 2013-09-11T05:37:01.827 回答