Question

我创建了以下表单作为angular指令，并尝试从父控制器访问firstname。请帮助我或指导我如何从MainCtrl中访问指令表单字段。

HTML

 <pre>
      {{filter-frm| json}}
 </pre> 

 <div ng-controller="MainCtrl">
    <userform></userform>
 </div>

JS

.controller('MainCtrl', ['$scope',  function($scope){
    console.log($scope.filterForm.firstname) //How to get this ?
};

.directive('userform', [function () {
    return {
        restrict: 'E',
        scope: { formCtrl: '=' }
        template: '<div>'
            + '<form id="filterForm" ng-submit="login()">'
            + '<input name="firstname" ng-model="user.firstName">'
            + '</form> '
            + '</div>',
        link: function (scope, element, iAttrs) {
            var form = element.find('form');
            scope.formCtrl = form.controller('form');
        }
    };
}]);

Answer 1

如果您在指令模板中向表单添加name属性，则可以通过scope.formName访问该属性。它还应该通过scope.formName.fooInput绑定输入字段值。

在您的情况下，添加name="filterForm"应该可以解决问题：

template: '<div>'
    + '<form id="filterForm" name="filterForm" ng-submit="login()">'
    + '<input name="firstname" ng-model="user.firstName">'
    + '</form> '
    + '</div>',

现在您应该能够访问父控制器中的scope.filterForm。

Param：名称（可选）; 类型：字符串; 详细信息：表单的名称。如果指定，表单控制器将以此名称发布到相关范围。

来自ngForm doc

如何访问AngularJS指令表单字段到父控制器

1 个答案: