我目前正在使用以下方法。
$scope.$$childHead.customerForm[firstName]
,以便:
<form name="customerForm">
<input type="text" name="firstName"
ng-model="data.customer.firstName"
tabindex="1"
ng-disabled="!data.editable"
validationcustomer />
</form>
但这仅适用于Chrome。现在我尝试了以下方法:
$scope.editCustomerForm[firstName]
,以便:
<form name="customerForm" ng-model="editCustomerForm">
<input type="text" name="firstName"
ng-model="data.customer.firstName" tabindex="1"
ng-disabled="!data.editable"
validationcustomer />
</form>
这行不通。请注意,我的表单位于"基础"选项卡中。如何访问firstName
?
编辑:当form
位于基础选项卡中时,它似乎没有添加到scope
中。
有人对此有解决方案吗?
无法访问输入的原因是"基础"选项卡(或ng-repeat
?)创建了一个隔离范围。解决此问题的一种方法是使用控制器作为语法:
<div ng-controller="MyController as ctrl">
<!-- an example of a directive that would create an isolate scope -->
<div ng-if="true">
<form name="ctrl.myForm">
...inputs
Dirty? {{ctrl.myForm.$dirty}}
<button ng-click="ctrl.saveChanges()">Save</button>
</form>
</div>
</div>
然后,您可以在代码中访问FormController,例如:
function MyController () {
var vm = this;
vm.saveChanges = saveChanges;
function saveChanges() {
if(vm.myForm.$valid) {
// Save to db or whatever.
vm.myForm.$setPristine();
}
}
您可以将表单附加到父控制器中定义的某个对象。然后,您甚至可以从子范围访问表单。
父控制器
$scope.forms = {};
子作用域中的某些模板
<form name="forms.form1">
</form>
问题是,在执行控制器中的编码时,不必定义表单。所以你必须做这样的事情
$scope.$watch('forms.form1', function(form) {
if(form) {
// your code...
}
});
如果要将表单传递给控制器以进行验证,只需将其作为参数传递给处理提交的方法即可。使用表单名称,因此对于原始问题,它将如下所示:
<button ng-click="submit(customerForm)">Save</button>
答案有点晚了,但带有以下选项。它对我有用,但不确定它是否正确。
在我看来,我正在这样做:
<form name="formName">
<div ng-init="setForm(formName);"></div>
</form>
在控制器中:
$scope.setForm = function (form) {
$scope.myForm = form;
}
现在,完成此操作后,我的控制器变量中得到了我的表单,该变量$scope.myForm
为了能够访问控制器中的窗体,必须将其添加到虚拟范围对象中。
像$scope.dummy = {}
对于您的情况,这意味着:
<form name="dummy.customerForm">
在控制器中,您将能够通过以下方式访问表单:
$scope.dummy.customerForm
你将能够做这样的事情
$scope.dummy.customerForm.$setPristine()
维基链接
在您的模型中使用"."将确保原型继承 在玩。所以,使用
<input type="text" ng-model="someObj.prop1">
而不是 比<input type="text" ng-model="prop1">
如果您确实想要/需要使用原语,有两种解决方法:
1.在子作用域中使用$parent.parentScopeProperty。这将防止 子范围从创建自己的属性。2.定义一个函数 父作用域,并从子作用域调用它,传递基元 值取决于父级(并不总是可能的)
这个答案有点晚了,但我偶然发现了一个解决方案,使一切变得容易得多。
如果您使用的是 controllerAs 语法,然后从"this"变量引用它,则实际上可以将表单名称直接分配给控制器。 以下是我在代码中是如何做到的:
我通过 ui-router 配置了控制器(但您可以随心所欲地执行此操作,甚至可以直接在 HTML 中使用类似 <div ng-controller="someController as myCtrl">
的东西)这是它在 ui 路由器配置中的样子:
views: {
"": {
templateUrl: "someTemplate.html",
controller: "someController",
controllerAs: "myCtrl"
}
}
然后在 HTML 中,您只需将表单名称设置为"controllerAs"。名称"像这样:
<ng-form name="myCtrl.someForm">
<!-- example form code here -->
<input name="firstName" ng-model="myCtrl.user.firstName" required>
</ng-form>
现在,在控制器中,您可以非常简单地执行此操作:
angular
.module("something")
.controller("someController",
[
"$scope",
function ($scope) {
var vm = this;
if(vm.someForm.$valid){
// do something
}
}]);
是的,您可以在控制器中访问表单(如文档中所述)。
除非窗体未在控制器作用域中定义,而是在子作用域中定义。
基本上,一些角度指令,如ng-if
、ng-repeat
或ng-include
,会创建一个隔离的子作用域。任何定义了scope: {}
属性的自定义指令也是如此。可能,您的基础组件也妨碍了您。
在<form>
标签周围引入一个简单的ng-if
时,我遇到了同样的问题。
有关详细信息,请参阅以下内容:
-
https://groups.google.com/forum/#!topic/angular/B2uB8-9_Xbk
-
AngularJS - 使用 ng-include 时丢失范围
注意:我建议你重写你的问题。您的问题的答案是肯定的,但您的问题略有不同:
是否可以从控制器访问子作用域中的窗体?
答案很简单:不。
ng-model="$ctrl.formName"
属性添加到窗体中,然后在控制器中,可以通过this.formName
绝对不能在范围内访问表单。 它不是创建的。来自 html 模板的 DOM 加载速度有点慢,就像控制器构造函数一样。解决方案是观察,直到加载 DOM 并定义所有范围!
在控制器中:
$timeout(function(){
console.log('customerForm:', $scope.customerForm);
// everything else what you need
});