指令范围使用隐藏父元素的内部元素

Question

我试图实施一个指令，将使用ng-show和$timeout来延迟容器的显示。

这里就是我的指令看起来像：

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); 
      } 
     }; 
    }); 

然后，我会用它在我看来，这样的

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

到目前为止，延时工作。是的，我很自豪。但是，myText不能从控制器访问，因为它不在父范围内可见。我尝试将范围改为此：

scope: { 
    myText: '=' 
} 

建立一个双向数据绑定...没有任何成功。

什么是最简单的方法来实现我试图实现使用指令？非常感谢！

编辑：金科玉律

由于很多GregL他的回答！

最好的解决方法是简单地将我的ng模型包装在对象中以利用点符号来避免将ng模型绑定到子范围。子范围使用原型继承来查找其值，所以当在子范围中设置该值时，它不再查找父范围。

Answer 1

解决这个问题的最好办法是记住我称之为“AngularJS黄金法则”：

在NG始终使用点/句号（。）模型表达式。

这样，您就会将属性写入正确范围的正确对象。

但是，如果您真的想让它正常工作，您可以执行一个指令，使用链接函数的transclude参数对正确的作用域执行手动转换。

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); 
    } 
    }; 
}); 

这将的<div ng-show="showIt">内容的范围设置为与delay指令是在元件的范围。它还具有隔离范围的好处，以便您可以随意使用多个实例。

See it in action in a Plunkr

Answer 2

尝试{scope: false}。你正在用你的delay指令创建你自己的范围。

或者

link: function(scope, element) { 
    var showing = true; 
    $timeout(function() { 
    if (showing) { 
     element.hide(); 
    } else { 
     element.show(); 
    } 
    showing = !showing; 
    }, delay) 
}