如何获得表单数据时，形式是在角指令？ [英] How to get the form data when the form is in a directive in Angular?

问题描述

我有这个这个模板：

<div class="modal" id="popupModal" tabindex="-1" role="dialog" aria-labelledby="createBuildingLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="createBuildingLabel">{{ title }}</h4>
            </div>
            <form data-ng-submit="submit()">
                <div class="modal-body" data-ng-transclude>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-ng-click="visible = false">Annuleren</button>
                    <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-save"></span>Maken</button>
                </div>
            </form>
        </div>
    </div>
</div>

和这里的指令：

app.directive("modalPopup", [function () {
    return {
        restrict: 'E',
        templateUrl: 'Utils/ModalPopup',
        scope: {
            title: '@',
            onSubmit: '&',
            visible: '='
        },
        transclude: true,
        link: function (scope, element, attributes) {
            var container = $("#popupModal");

            scope.submit = function (newGroup) {
                scope.onSubmit(newGroup);
            }

            scope.hide = function () {
                container.modal('hide');
            }

            scope.show = function () {
                container.modal('show');
            }

            scope.$watch('visible', function (newVal, oldVal) {

                if (newVal === true) {
                    scope.show();
                }
                else {
                    scope.hide();
                }
            })
        }
    }
}]);

正如你可以看到我已经说过我是格式标记指令内，我也用 transclude 来决定如何我的形式将会是什么样的。现在我有这样的：

As you can see I have declared my form tag inside the directive and I also use transclude to determine how my form is going to look like. For now I have this:

<modal-popup title="Nieuwe groep aanmaken" data-on-submit="createGroup()" visible="showAddGroupForm">
    <div class="row">
        <div class="col-md-3">Kopieren van:</div>
        <div class="col-md-8">
            <select class="form-control" data-ng-model="newGroup.Year">
                <option value="">Nieuw jaar</option>
                <option data-ng-repeat="year in years" value="{{year.Id}}">{{year.Name}}</option>
            </select>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">Naam</div>
        <div class="col-md-8">
            <input type="text" class="form-control" data-ng-model="newGroup.Name" />
        </div>
    </div>
</modal-popup>

在提交按钮是pressed，我想在我的控制器中的数据是可用的。

When the submit button is pressed, I want the data to be available in my controller.

我QUES数据是因为孤立的范围不可用，但我不知道。什么我需要做的就是将数据从指令回我的控制器？

I ques the data isn't available because of the isolated scope, however I'm not sure. What do I need to do to get the data back from the directive into my controller?

PS：我知道角UI和angularstrap，但我这样做是为了了解角

PS: I know about angular-ui and angularstrap, but I'm doing this to learn about Angular.

编辑：

下面是一个小提琴

推荐答案

我觉得原因是如何工作的作用域（特别是包含）的误解。

I think the cause is a misunderstanding about how scopes work (especially with transclusion).

让我们从这个code开始（从小提琴）：

Let's start with this code (from the fiddle):

<div ng-controller="MyCtrl">
    <my-popup on-submit="formSubmitted(model)">
        <input type="text" ng-model="model.Name"/>    
    </my-popup>
</div>

由于＆LT;我-弹出＆GT; 的 transcludes 的内容，范围以上的是， MyCtrl ，甚至在指令的内容。按内容我的意思是＆LT;输入＆GT; 的不的指令模板，即＆LT; D​​IV＆GT;＆LT;形式... code。

Since <my-popup> transcludes its content, the scope above is that of MyCtrl, even in the content of the directive. By content I mean the <input>, NOT the directive template, i.e. the <div><form ... code.

因此​​它被暗示模式（如使用NG-模型=model.Name）是 MyCtrl 范围的属性，如 formSubmitted（）。因为两者是相同的范围内的成员，你并不需要通过模型参数;你可以只是做：

Therefore it is implied that model (as used in ng-model="model.Name") is a property of the scope of MyCtrl, as is formSubmitted(). Since both are members of the same scope, you do not need to pass the model as argument; you could just do:

（在模板：）

<my-popup on-submit="formSubmitted()"><!-- no `model` argument -->

（控制器：）

function MyCtrl($scope) {
    // I like declaring $scope members explicitly,
    // though it can work without it (charlietfl comments)
    $scope.model = {}; 
    $scope.submittedValue = null;
    $scope.formSubmitted = function() {
        // another bug was here; `model` is always a member of the `$scope`
        // object, not a local var
        $scope.submittedValue = $scope.model.Name;
    }
}

另外一个错误是在指令code：

Another bug is in the directive code:

link: function(scope, element, attributes){
    scope.submit = function(){
        scope.onSubmit({model: model});
    }
}

变量模式（而不是名称模型：）是不确定的！它是的父的范围的属性，所以你将有一个机会，如果范围没有被隔离。

The variable model (not the name model:) is undefined! It is a property of the parent scope, so you would have a chance if the scope was not isolated. With the isolated scope of the directive, it may work with an awful workaround that I am not even considering to write :)

幸运的是，你并不需要的指令来了解事情的外部范围内发生的事情。该指令有一个函数，以显示形式和提交按钮，并点击提交按钮时调用的回调。所以下面不仅足以在这个例子中，还从概念上正确的（该指​​令不关心什么happenning外面）：

Luckily, you do not need the directive to know about things happening in the external scope. The directive has one function, to display the form and the submit button and invoke a callback when the submit button is clicked. So the following is not only enough for this example, but also conceptually correct (the directive does not care what is happenning outside it):

link: function(scope, element, attributes){
    scope.submit = function(){
        scope.onSubmit();
    }
}

请参阅小提琴： http://jsfiddle.net/PRnYg/

顺便说一句：您正在使用角V1.0.1。这是的 WAAAAY 的太旧了，认真考虑升级！如果你的不的升级，添加结束＆LT; / DIV＆GT; 来模板：＆LT; D​​IV NG-transclude＆GT; ＆LT; / DIV＆GT;

By the way: You are using Angular v1.0.1. This is WAAAAY too old, seriously consider upgrading!!! If you do upgrade, add the closing </div> to the template: <div ng-transclude></div>.

这篇关于如何获得表单数据时，形式是在角指令？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！