将呈现的表单放入$ StateChangeStart

Question

有没有办法让渲染的表格变成

$ rootScope.on（“$ stateChangeStart”，function（）{

}）

我尝试了两件事。 第一：使用$ 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"));