将表单呈现到$StateChangeStart中

Question

有什么方法可以让呈现的表单

$rootScope.on("$stateChangeStart"，函数(){

})

我试过两件事。首先:使用$template请求，我使用templateURL获得了模板，并对其进行了编译，但它呈现的是预定义模板，而不是DOM呈现的模板。

见代码

if (fromState.name.length > 0) {
  $templateRequest(fromState.templateUrl)
    .then(function (html) {
       var compiledElement = $compile(html)($rootScope);
       var compliedForm = compiledElement.find('form');
    }
}

其次，我试着用

angular.element('document').find('form');

但它给了我属性列表。但是如何获得支票表格是有效的或无效的。

文档

​

​

Answer 1

我认为，当当前视图中的窗体无效时，您试图实现的是阻止状态更改。我会为此制定一个指令，比如：

app.directive("formValidStateCheck", function($rootScope) {
    return {
        restrict: "A",
        require: "ngForm",
        link: function(scope, element, attrs, ngFormCtrl) {
            $rootScope.$on("$stateChangeStart", function(event) {
                if (ngFormCtrl.$invalid) {
                    // prevent routing
                    if (!confirm("Are you sure"))
                        event.preventDefault();
                    }
                }
            });
        }
    }
});

也不愿把指令放在表格上：

<form ng-form="myForm" form-valid-state-check>

</form>

Answer 2

.find()方法不适用于选择器和标记名。您需要通过表单id获得它(为此，需要对表单有一个id)。

然后使用angular.element(document.getElementById("#form_id"));