angularjs - ngModel needs $parent when within Transcluded html -

I have an instruction for these input fields which uses ingestion to take the attached elements in the instructions, in which one To know how to get the ng-model to sync with ng-model in your code, ng-model attribute countless After reading the SO questions and angle document I finally stumbled. To do this, it is to use the $ parent on a move where the code inside the input code is ng-model all this is fine and dandy, however, this clanky

I saw the planker here:

I tried to make this a bit more elegant by turning around the end of the function within my link function:

``

var transcludedContent, transclusionScope; TranscludeFn (scope, work (clone, scope) {//headerCtrl.element.append(clone); transcludedContent = clone; transclusionScope = scope; console.log ('scope form:', scope); console.log ('transclude form : ', Clone);}); In addition, this plunker has been shown:

It would seem that the transmission work will allow you to overwrite the scope of perfection with the scope of your instructions. Then the ng-model attributes will be directed and linked to the scope of the instructions, however, it is not.

However, $ parent. & Lt; Ng-model & gt; works, it feels very laughing, and can cause bugs, as if my instructions were not used with parents, there is no account in it defined object < / P>

There are a few ways to do this.

1) =

JS:

  app.directive ('formControl' ) Using the code> account  variable. {{Account.name}}, Radius: {account: '='}, transclude: [function () {return {restricted: 'EA', template: '& lt; Div ng-transclude & gt; & Lt; / Div & gt; True, link: function (region, element, ethers) {scope.account = {}; Console.log ('scope:', scope)}}}}]);  

HTML:

  & lt; Form-control account = 'account' & gt; & Lt; Label = "name" & gt; Enter name: & lt; / Label & gt; & Lt; Input name = "name" ng-model = "account.name" \ & gt; & Lt; / Form control & gt;  

2) Using the transclude function:

This is what ngIf and ngRepeat Do ngRepeat actually decorate every scope with the same values, just like you do with your scope of account Want to decorate.

  app.directive ('formControl', ['$ animate', function ($ animate) {return} { Return: 'EA', Transcribe: 'Element', Link: Function (Scope, Element, etters, CTNL, Transcluse) {// This creates a new radius that inherits from parent scope / which is a new radius Which you will transclude in your / / Transcluded HTML (function (clone, scope) {scope.account = {name: 'foobar'}; $ animate.enter (clone, empty, element); console.log ('SCOPE:', Scope)});}};}]);  

HTML:

  & lt; Form-Control & gt; & Lt; Label = "name" & gt; Enter name: & lt; / Label & gt; & Lt; Input name = "name" ng-model = "account name" \ & gt; & Lt; Br> {{Account.name}} & lt; / Form-control & gt;