Question

以下是我的指示：

restrict: 'E',
scope: {

},
templateUrl: 'directives/my.directive.html',
link: function(scope) { 
    // Want to be able to access "myForm" here (eg: to setPristine(), etc)
    scope.bla = {}
}

以下是模板中的内容：

<form name="myForm" novalidate>
    <input name="inputOne" type="text" ng-model="bla.name" required/>
</form>

我试过了：

console.log(scope.myForm) // shows undefined

和

<form name="myForm" novalidate>
    <div ng-init="bla.newForm = myForm"></div>

    <input name="inputOne" type="text" ng-model="bla.name" required/>
</form>

console.log(scope.bla.newForm) // Undefined

请不要告诉我：

require: '^form'

我收到错误：无法获取FormController。这是正确的，因为表单是指令的一部分而不是父模板/范围

真的很感激这里的一些帮助。

Answer 1

从表单获取表单控制器的一种非常简单的方法，无论范围如何（或者如果您需要从另一个控制器，服务或指令访问它），都是使用angular.element。

angular.element("[name='myForm']").controller("form");

这里需要注意的是，表单必须已经加载/编译到DOM中，但是由于您在链接函数中执行此操作，因此它应该已经呈现。如果未定义，请尝试将其包装在$ timeout中，以使摘要有机会运行。

 $timeout(function() { angular.element("[name='myForm']").controller("form"); });

这不是最好的做法＆＃34;但如果你已经筋疲力尽了其他选择，那就太棒了。

Answer 2

scope.myForm应该在你的指令的控制器/链接功能中可用。

以下是一个例子：

var app = angular.module('app',[]);
app.directive('myDirective', function() { 
  return {
     restrict: 'E',
     scope: {},
     template: '<form name="myForm"></form>',
     link: function(scope, element, attr) {
       alert("scope.myForm is available: " + scope.myForm);
       alert("so is $setPristine():" + scope.myForm.$setPristine);
       alert("so is $error object: " + scope.myForm.$error);
     }
  }
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
   <my-directive></my-directive>
</div>

当表单在指令中时，如何访问FormController？

2 个答案: