javascript - Directive scope using transclusion hiding parent scope of inner elements -

i'm trying implement directive delay apparition of container using ng-show , $timeout.

here's directive looks like:

angular.module('myapp')     .directive('delay', function($timeout) {         return {             template: '<div ng-show="showit" ng-transclude></div>',             replace: false,             transclude: true,             scope:true,             restrict: 'a',             link: function postlink(scope, element, attrs) {                 $timeout(function() {                         scope.showit = true;                 }, attrs.delay);             }         };     }); 

then, use in view this

<div delay="1000">     <intput type="text" ng-model="mytext"/> </div> 

so far, delay works. yeah, i'm proud. then, mytext isn't accessible anymore controller because it's not visible parent scope. tried changing scope instead:

scope: {     mytext: '=' } 

to establish two-way data-binding...without success.

what simplest way implement i'm trying achieve using directive? lot!

edit: golden rule

thanks lot gregl answer!

the best way around wrap ng-models in object make use of dot notation avoid binding ng-model child-scope. child scope use prototypal inheritance value, when value has been set in child scope, no longer looks parent scope.

the best way around keep in mind call "angularjs golden rule":

always use dot/period (.) in ng-model expressions.

that way, writing property correct object on correct scope.

however, if wanted work, directive makes use of transclude argument link function manual transclusion against correct scope.

sample.directive('delay', function($timeout) {   return {     template: '<div ng-show="showit"></div>',     replace: false,     transclude: true,     scope: {},     restrict: 'a',     link: function postlink(scope, element, attrs, nullctrl, transclude) {       var transcludescope = scope.$parent;       transclude(transcludescope, function(clone) {         element.find('div[ng-show]').append(clone);       });       $timeout(function() {         scope.showit = true;       }, attrs.delay);     }   }; }); 

this set scope of contents of <div ng-show="showit"> scope of element delay directive on. has benefit of having isolate scope can use multiple instances wherever like.

see in action in plunkr