javascript - 使用包含隐藏内部元素的父范围的指令范围

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

然后，我会像这样在我的 View 中使用它

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

到目前为止，延迟有效。是的，我很自豪。但是，myText 不再可以从 Controller 访问，因为它对父范围不可见。我尝试将范围更改为此:

scope: {
    myText: '='
}

建立双向数据绑定(bind)...没有任何成功。

使用指令实现我想要实现的目标的最简单方法是什么？非常感谢!

编辑:黄金法则

非常感谢 GregL 的回答!

最好的解决方法是简单地将我的 ng-models 包装在一个对象中，以使用点符号来避免将 ng-model 绑定(bind)到子范围。子作用域使用原型(prototype)继承来查找其值，因此当子作用域中设置了值时，它不再查找父作用域。

Answer 1

最好的解决方法是牢记我所说的“AngularJS 黄金法则”:

Always use a dot/period (.) in your ng-model expressions.

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

但是，如果你真的想让它工作，你可以做一个利用 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