Question

我有一个使用ng-include创建的表单。我正试图在ng-include范围之外检索它的状态。在子范围内观察userForm.$valid的价值的最佳方法是什么？是否可以将userForm.$valid绑定到mainController中父作用域中的变量？

问题的简化版here

Answer 1

当我们将属性从父组件传递给子组件以用作子组件的属性时，这很好，因为子组件对于其父组件没有像我们通常那样的知识当我们将父的范围属性传递给可重用的指令（具有隔离范围）时。

您的情况正好相反，您需要更新子组件内的父属性。一般来说，组件不应该对其父组件有任何了解，否则会有紧耦合。

在您的情况下，我建议使用事件驱动的解决方案，只要有效性发生变化，表单就会调度一个事件，任何其他订阅该事件的组件都会收到通知

使用您的代码，在表单上创建一个控制器：

<form name="userForm" ng-submit="submitForm()" ng-controller="formController" novalidate>

你的js代码：

// create angular controller
validationApp.controller('mainController', function($scope) {
    $scope.$on("formValidityChanged",function(event,validity){ //your main controller is interested in the event, listen to it
        $scope.userFormValidity = validity;
    });
});

// create angular controller
validationApp.controller('formController', function($scope) {
   $scope.$watch("userForm.$valid",function(value){
      $scope.$emit("formValidityChanged",value);
   })
});

DEMO

在ng-include中检索表单有效状态

1 个答案: