AngularJS 在 ng-if 中提交表单答案

【问题标题】：AngularJS submit form inside ng-ifAngularJS 在 ng-if 中提交表单
【发布时间】：2015-11-23 10:20:41
【问题描述】：

我在带有ng-include 的控制器内的ng-if 中有一个表单，它不会提交...

我知道 ng-if 和 ng-include 创建自己的范围，但我认为您可以访问控制器方法..

index.html

<div data-ng-controller="myCtrl">
    <div data-ng-include="form.html" data-ng-if="loadForm"></div>
</div>

form.html

<form action="" data-ng-submit="submit($event)">
    <input type="text" name="foo" data-ng-model="foo">
    <input type="submit" value="Go!">
</form>

ctrl.js

'use strict';
app.controller('myCtrl', function ($scope, $element, $http, $log) {
        $scope.loadForm = true;

        $scope.submit = function(e) {
            e.preventDefault();
            console.log("hello");
        };
    }
);

当我点击提交时，没有任何东西登录到控制台，e.preventDefault(); 也没有触发......

我知道问题是范围层次结构...我不能这样做 data-ng-submit="$parent.submit($event)" 因为表单将在其他地方使用并且表单代码需要可重用。

【问题讨论】：

试试myCtrl as formCtrl和formCtrl.submit
它也不起作用......
只是为了确保它与范围相关而不是事件处理问题：当您通过 ng-click 从提交输入调用控制器函数时会发生什么？
如果我将它与as formCtrl 一起使用，则不会发生任何事情，如果我只是使用data-ng-click="submit($event)"，那么该方法将被正确触发
很奇怪。这有点违背范围层次假设

标签： javascript angularjs forms

【解决方案1】：

@Robert，您可以使用 ng-show 而不是 ng-if。因为 ng-if 分别根据表达式评估 true/false 创建/销毁新的 DOM 树。

【讨论】：

表达式loadForm 计算为true。所以这也不是ng-if 的问题。
@SudhirOjha，你是对的。我尝试运行上述问题，这正在运行，请参见此处-jsfiddle.net/xyeh1rkt/6