Question

我想创建一个可重用的指令，通过指令将父作用域传递给它的子作用域。

例如，我想动态设置容器的高度，以便它可以滚动。问题是我想要重复的任何项目（在这种情况下是日志）我必须传入可滚动指令，因为一旦我添加它包含在其中的任何内容都在可滚动范围内。

当我想在不需要log参数的容器上重用可滚动指令（或需要许多类型的日志）时，问题就出现了。有没有办法让内部ngRepeat达到指令范围之外？或者让指令将父级的范围映射到它自己的位置？

我的HTML如下。请注意，我必须传入'service.log'，以便ngRepeat知道要迭代的内容。

<div ng-controller="LogCtrl" class="span3">
  <div scrollable log="service.log" selector="#stats-content" class="well">
    <h4>Log</h4>
    <dl ng-repeat="item in log">
      <dt>{{item.key}}</dt>
      <dd>{{item.value}}</dd>
    </dl>
  </div> <!-- well -->

我的控制器非常简单：

.controller('LogCtrl', function($scope, log_service) {
  $scope.service = log_service;
});

可滚动指令：

.directive('scrollable', function(current) {
  return {
    restrict: 'A',
    scope: {
      selector: '@',
      log: '='
    },
    link: function(scope, elem, attrs, ctrl) {
      var height = $(attrs.selector).height();
      elem.height(height - 300 + 'px');
    }
  };
});

Answer 1

根据您的需要，您可以使用 directive definition object 的transclude属性以及 ngTransclude 指令。引用文档：

<强> transcule
  编译元素的内容并使其可用于指令。通常与ngTransclude一起使用。 [...]
  在典型设置中，窗口小部件创建隔离范围，但是转换不是子项，而是隔离范围的兄弟。这使得窗口小部件可以具有私有状态，并且将转换绑定到父级（预隔离）范围。

_{（强调我的）}

这样，您的指令不需要知道有关父作用域service的任何内容（log或任何内容或其他内容）。它只是使元素可滚动，但元素的内容（包括具有ng-repeat指令的子元素）绑定到非隔离范围，这意味着它原型继承父范围的属性（包括例如{ {1}}）。

因为它可能首先听起来比它复杂，修改后的代码可能如下所示：

service

另请参阅此 short demo 。

通过angularjs指令传递范围

1 个答案: