Question

我有一个指令，其中包含一个带有表单的转换。我想从指令访问表单，但它是未定义的。

如何访问transclude的范围？

我是棱角分明的新人，所以我尝试做的事情不是最佳做法吗？

我做了一个简单的演示来说明我想要做的事情。

https://plnkr.co/edit/wzq5oFTuoAqVJMF2RUy2?p=preview

<my-directive>
   <form role="form" name="myForm" ng-submit="submit()">
        <input type="text" id="myInput" ng-model="myInput" />
        <input type="submit" value="Submit" />
    </form>
</my-directive>

var myApp = angular.module('myApp', []);

myApp.controller('myController', function myController($scope){

});

myApp.directive('myDirective', function(){
   return {
    template: '<div ng-transclude></div>',
    restrict: 'E',
    transclude: true,
    replace: true,
    link: function (scope, element, attrs) {
      scope.submit = function(){
        debugger;
        var myForm = scope.myForm; //myForm is undefined

      } 
    }
   }
});

Answer 1

您应该使用element参数而不是链接函数中的scope参数来访问dom元素。

var myForm = element[0].querySelector('form')

或

var myForm = element[0].children.myForm

将为您提供表单元素的句柄。我推荐前者。

Answer 2

由于范围与其控制器绑定，因此现在您可以通过两种方法解决此问题

1＆GT;定义一个控制器并在此使用形式下作为模型

2 - ;要获得对象的形式，只需使用this.form

  myApp.directive('myDirective', function(){
   return {
    template: '<div ng-transclude></div>',
    restrict: 'E',
    transclude: true,
    replace: true,
    link: function (scope, element, attrs) {
      scope.submit = function(){
        debugger;
        var myForm = this.myForm; // this.myForm is defined

      } 
    }
   }
});

如何从它的指令中获取转换的范围

2 个答案: