Question

我有一个主窗体，里面有嵌入式窗体。嵌入的表单根据用户决定提交的表单类型而改变，外部表单在每种情况下都保持不变。我正在尝试同时采用两种形式的内容并提交它们。我在同一个模型上组合表格。外表：formHolder.outer...，内部形式：formHolder.inner...

我是在假设控制器中的指令可以访问控制器的变量的情况下构建的。

HTML

<div ng-controller="MakeRequestCtrl">
    <ng-form name="make_request">
        <template-maker formtype="email"></template-maker>
        <template-maker formtype="email"></template-maker>
        <template-maker formtype="email"></template-maker>

        <input type="text" ng-model="formHolder.outer.fname" />
        <input type="text" ng-model="formHolder.outer.lname" />
        <input type="email" ng-model="formHolder.outer.email" />

        <input type="submit" ng-click="submitForm(formHolder)" value="Submit"/>
    </ng-form>
</div>

内部指令

appDirectives.directive('templateMaker', function(){
    return{
        require: '^form',
        restrict: 'AE',
        scope: {
            formtype: '@',
            formHolder: '='
        },
        templateUrl: 'tp/template_controls.html',
        link: function(scope){
            ...
        }
    }
});

外部控制器

appControllers.controller("MakeRequestCtrl", function($scope){
    ...
    $scope.returnForm = function(user){
        console.log(user);
    }
    ...
});

当我提交表单时，检查控制台。我只收到外层表格内容。

如何将内部表单内容与外部表单内容合并到我的formHolder对象中？

Answer 1

我忘了将form-holder属性添加到指令元素。

<template-maker formtype="email" form-holder="formHolder" ></template-maker>

同样重要的是要记住，指令范围中的camelCase变量在大小写更改之间用连字符表示，例如sportsCar将是sports-car。

嵌入式指令未将其表单数据传递给父控制器

1 个答案: