AngularJS如何在与指令相同的级别上要求ngForm

时间:2014-10-26 00:32:38

标签: javascript angularjs angularjs-directive angular-directive

我试图在我的指令中要求与ngRepeat的每次迭代相关联的ngForm。我尝试过使用require:' form'但它返回未定义,也尝试过' ^ form',但它在ngRepeat之外提供mainForm。有没有像require这样的特殊方式:' ngForm'这将在我的form-view指令的第一个元素上给我ngForm的控制器?

表单视图指令之外的父指令模板

... // some other markup
<form name="mainForm">
... // some other markup

// Vertically stacked tabs directive
// Creates left/right cols, left=stacked tabs, right=form associated content using transclude
<pills> 

    // Pill pane content with title attribute passed up to pills during compile for stacked tabs
    <pill ng-repeat="form in formData.documents"
          title="{{form.name}}">

            // Generated form content for each pill pane
            <form-view form="form"
                       model="formModel"></form-view>

    </pill>

</pills>

... // some other markup
</form>

表单视图指示模板

<fieldset ng-form="form.id"> // want reference to this controller using require

    <h3 ng-bind="form.name"></h3>
    <div ng-repeat="field in form.mapping.fields" 

    ... // bunch of generated fields
    </div>

</fieldset>

表单查看指令

.directive('formView', [function() {

    return {
        restrict: 'E',
        templateUrl: '/app/components/form-view/formview.html',
        scope: {
            form: '=',
            model: '='
        },
        require: ['^tabs', '^pills', '^form'], // also tried 'form', '?form', 'ngForm', 'ngform'
        link: function( $scope, $element, $attrs, ctrls ) {
            $scope.tabsCtrl  = ctrls[0]; // got tabs
            $scope.pillsCtrl = ctrls[1]; // got pills
            $scope.formCtrl  = ctrls[2]; // always undefined or grabs mainForm
        }
    };
}]);

1 个答案:

答案 0 :(得分:2)

你不能“要求”指令元素内的东西,只能在它上面或上面。

执行此操作的一种方法是制作您自己的ngForm指令,该指令需要您的formView然后与之对话。它将沿着现有的ngForm生存。

查看ngForm和ngModel的实现,了解实际示例 - ngForm知道其中的ngModel,但不是因为表单找到模型,模型让表格知道它们的存在。