Question

我希望看一下表格是否质朴。我的HTML看起来像这样：

 <div ng-if="ObservationCtrl.showHeader">
    <form class="form-horizontal" name="ObservationCtrl.observationForm" role="form" ng-if="!ObservationCtrl.doingResolve">
  {{ObservationCtrl.observationForm.$pristine}}
       <!-- SOME HTML -->
    </form>
 </div>

在我的控制器中，我有以下代码：

    console.log(self.observationForm);

    $timeout(function(){
            $scope.$watch('self.observationForm', function() {
                if(self.observationForm) { 
                    console.log('form is valid? ', self.observationForm.$pristine); 
                } else {
                    console.log('form is not defined');
                }

            });
        },2000);

这会记录undefined，但这样做，因为它在2秒后开始观看表格，当它已经存在时。但是，如果我将超时减少到100，甚至0，那么我得到form is not defined消息，当我在表单中更改某些内容时，无法识别更改。根据一些SO帖子，这是因为我在编译之前开始观看形式。

我希望在编译后开始观看表单。依赖一些预定义的超时是很棘手的，但我还没有找到任何其他方法来做到这一点。我也试过$evalAsync，但没有运气。

Answer 1

$scope不知道self属性，您应该将其更改为“控制器为”名称。另外，你说你看$pristine属性，所以你应该看一下：

$scope.$watch('ObservationCtrl.observationForm.$pristine}', function(val) {
    console.log("Is pristine:", val);
});

或者您可以将其更改为函数回调：

$scope.$watch(function() {
    return self.observationForm.$pristine;
}, function(val) {
    console.log("Is pristine:", val);
});

当然，您可以检查表单是否已存在，在您的情况下是由于ng-if指令：

$scope.$watch(function() {
    if (self.observationForm) {
        return self.observationForm.$pristine;
    }

    return false;
}, function(val) {
    console.log("Is pristine:", val);
});

AngularJS：在编译表单后开始观察表单更改

1 个答案: