AngularJS - access scope from transclude scope

I have a directive with some form. Usually this is all I need, but sometimes I need to add some more input fields. Therefore, I tried to use a transition for this, but it does not work.

I created a plunker to show this: http://plnkr.co/edit/zNOK3SJFXE1PxsvUvPBQ?p=preview

A directive is a simple form with an input field, a transition, and a button to help test it (non-essential parts are omitted):

scope: {
},
transclude: 'element',
template: 
  '<form name="myForm">' +
  '<input type="text" ng-model="data.inDirective"></input>' +
  '<div ng-transclude></div>' +
  '<button ng-click="showData()">show data</button>' +
  '</form>'

And here it is used with the transition:

<form-as-directive>
  <input type="text" ng-model="data.inTransclude"></input>
</form-as-directive>

Can I use the scope in transition in some way?

+4
source share
2 answers

transcluded html () , "" ( ng-transclude), transcludeFn . .

scope: {
},
transclude: 'element',
replace: true,
template: 
    '<form name="myForm">' +
    '<input type="text" ng-model="data.inDirective"></input>' +
    '<div class="fields"></div>' +
    '<button ng-click="showData()">show data</button>' +
    '</form>',
link: function (scope, elem, attrs, ctrl, transcludeFn) {
    // "scope" here is the directive isolate scope 
    elem.find('.fields').append(transcludeFn(scope, function () {}));
}

() () , ( ).

+6

, $$nextSibling - , :

 scope.$$nextSibling.data.inTransclude

:

transcluded , $$ nextSibling .

Plunk: http://plnkr.co/edit/z2Bmfx?p=preview

+1

All Articles