How do you access the scope of a transclusion from it's directive

Viewed 154

I have a directive that includes a transclusion with a form in it. I want to access the form from the directive but it is undefined.

How do I access the scope of the transclude?

I'm new to angular so maybe what I'm trying to do isn't best practice?

I've made a simple demo to illustrate what I'm trying to do.

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

      } 
    }
   }
});
2 Answers
Related