Question

我遇到一个问题，当ng-form嵌套在ng-scope中时，没有在范围上设置表单。

例如

<div ng-controller='TestCtrl'>
    <ng-switch on="switchMe">
        <div ng-switch-default>Loading...</div>
        <div ng-switch-when="true">
            <form name="nixTest">
                <input placeholder='In switch' ng-model='dummy'></input>
                <button ng-click="test()">Submit</button>
            </form>
        </div>
    </ng-switch>
</div>

控制器：

controllers.TestCtrl = function ($scope) {
    $scope.switchMe = true;
    $scope.test = function () {

        if ($scope.nixTest) {
            alert('nixTest exists')
        } else {
            alert('nixTest DNE')
        }
    }
}

这有什么工作吗？可以找到测试小提琴here

Answer 1

ng-switch创建子范围，并在此范围内创建表单。因此，子范围表单在父范围内不可用。

要访问它，您可以将其传递给方法test()，例如ng-click=test(nixTest)。因此，范围方法签名也需要更新以支持输入参数。

Answer 2

我遇到了同样的问题。遗憾的是，我无法轻松应用Chandermani的解决方案，因为我需要在$on父范围内的ng-switch调用中访问表单名称。因此，我使用创建一个指令将表单的名称发送到$rootScope：

.directive("globalName", ["$rootScope", function($rootScope) {
    return function(scope, element) {
        $rootScope["get_" + element.attr('name')] = function() {
            return scope[element.attr('name')];
        };
    }
}]);

用法是这样的：

<form name="whatever" novalidate global-name>...</form>

然后您访问控制器中的表单，例如像这样：

$scope.get_whatever().$setPristine();
$scope.get_whatever().$setUntouched();

作为$rootScope中的名称，它不再依赖于您的DOM结构。

我知道这不是一个最佳的解决方案，因为它会污染全局命名空间，但是我会感到不舒服，因为表单名称的可见性取决于DOM结构，并且有些意外。

ng-form嵌套在ng-switch中

2 个答案: