如何訪問AngularJS指令表單字段到父控制器中

Question

我創建了以下表單作爲一個角度指令並嘗試從父控制器訪問名字。 請幫助我或指導我如何從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父控制器。

參數： name（optional）; 類型： string; 細節：窗體名稱。如果指定，表單控制器將以此名稱發佈到相關範圍。

從ngForm doc

Answer 2

您必須將字段的值綁定到控制器的模型變量。 爲此，您必須將表單字段公開爲指令的屬性。

請參閱https://docs.angularjs.org/#!/guide/directive以及如何使用範圍字段。