触发 $scope.$watch 后更新表单输入名称值答案

【问题标题】：Updating a form input name value after a $scope.$watch is triggered触发 $scope.$watch 后更新表单输入名称值
【发布时间】：2017-08-20 07:56:37
【问题描述】：

我正在使用 AngularJS 1.4。我有一个表单输入元素，我正在尝试动态设置名称属性。

<input type="email" name="{{ctrl.name}}" class="form-control" id="email" ng-minlength="5" required>

name 属性按预期分配，只要在控制器运行时声明并分配 name。但是，在控制器使用$scope.$watch 检测到对参数的更改后，我需要它工作...

function FormFieldCtrlFtn($scope, $log) {
    var vm = this;    
    vm.name = ''; // works if I provide a name here

    $scope.$watch(function(scope) {
      return (vm.obj);
    }, function(newval, oldval) {
      if(newval) {
        vm.name = newval.name; // need it to work when the name is updated here
        $log.info('name: ' + vm.name);
      }
    });
}

即使$scope.$watch 被触发并且vm.name 变量被分配了一个有效值，这在我的表单中也没有被检测到。有解决办法吗？

【问题讨论】：

标签： javascript html angularjs forms angularjs-scope

【解决方案1】：

如果您要查看范围的特定变量，我建议您进行更改：

$scope.$watch(function(scope) {
    ...
});

收件人：

$scope.$watch('varYouAreWatching', function(newValue, oldValue) {
    ...
});

其中varYouAreWatching 是您要查看的变量。

Here is a JSFiddle that may inspire you

【讨论】：

无论 OP 尝试什么都是有效的 $watcher 表达式，因为 watcher 可以是一个函数.. 但我唯一怀疑的是，如果 OP 想要对整个对象进行监视，那么他应该将其设为deep watcher 以检测vm.obj 的变化
您可以使用该函数观察范围变量，这是将控制器与变量解耦的更好方法（参见此处..bennadel.com/blog/…）。正如我所提到的，问题不在于手表没有被触发。它已被触发，但未在表单中检测到更改。