如何在指令模板中将嵌入元素的范围更改为 ng-repeat 项目范围

Question

我希望能够获得嵌入的内容。将其应用于指令中的 ng-repeat。然后将每个 ng-repeat 的作用域应用到转入内容的克隆。

在另一个指令A的一部分中我有这个：

...

<directive-b>
    // title is exposed here to directiveA but I want it to be changed to ng-repeat scope later
    <p>Hello {{title}}</p>
</directive-b>

...

在directiveB指令内

(function() {
    'use strict';
    angular.module('app')
        .directive('directiveB', DirectiveB);

    function DirectiveB() {
        return {
            restrict: 'E',
            transclude: true,
            scope: {},
            bindToController: {},
            compile: DirectiveBCompile,
            controller: DirectiveBController,
            controllerAs: 'vm',
            templateUrl: 'directive-b.partial.html'
        }
    }

    function DirectiveBCompile(cElem, cAttr, cTransclude) {
        // cTransclude is deprecated... so cant do this here
        return InfiniteScrollLink;
    }

    function DirectiveBController() {
        var vm = this;
    }

    function DirectiveBLink(scope, element, attrs, controller, transclude) {
        // ideally would be great to somehow apply ng-repeat scope to each transcluded element here, but I couldn't

        scope.data = [{
            title: 12345
        }, {
            title: 345245
        }, {
            title: 32452345
        }];
        // this scope doesn't get picked up either
        scope.title = "12345";
    }
})();

内部指令B指令部分

<ul>
    <li data-ng-repeat="data in vm.data" data-ng-transclude>
    </li>
</ul>

有什么方法可以将 ng-repeat 中的“数据”作为 transclude 的范围传递？

我想看到的是：

<ul>
    <li>
        <p>Hello 12345</p>
    </li>
    <li>
        <p>Hello 345245</p>
    </li>
    <li>
        <p>Hello 32452345</p>
    </li>
</ul>

Answer 1

呃，很遗憾没有人回答这个问题。对于可能正在寻找答案的人：

实际上，您可以为指令中嵌入的元素提供任何您想要的范围 - 您只需要为此使用 transclude 函数，如下例所示：

angular.module('MyApp', [])
  .directive('myDirective', myDirective);

function myDirective() {
  return {
    scope: {},
    restrict: 'E',
    transclude: true,
    link: MyDirectiveLinker,
    template: 'Yes, he is' // see? No ng-transclude attribute in directive's template. Why? Look inside of the link function
  };

  /////

  function MyDirectiveLinker ($scope, $element, $attrs, $ctrl, $transclude) {
    $scope.arrow = ' <- '; // our 'inner' variable

    $transclude(
      $scope, // and here, you attach directive's scope to the transcluded element
      function(_transcludedElement, _scope) {
        $element.prepend(_transcludedElement);
      }
    );
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>

<main ng-app="MyApp">
  <my-directive>
    I use data of directive's scope{{arrow}}
  </my-directive>
</main>

Answer 2

我能够以一种非常肮脏的方式做到这一点。

<directive-b>
    // just want to point out that this is **probably** the only way to pass
    // data-bind inside this element as otherwise scope would be overwritten
    <div ng-controller="DirectiveBTemplate as template">
        <p>Hello {{template.data.title}}</p>
    </div>
</directive-b>

那么，

<ul>
    // data="data" is crucial here, basically sets data to ng-repeat scope
    <li data-ng-repeat="data in vm.data" data="data" data-ng-transclude>
    </li>
</ul>

然后，

(function() {
    'use strict';
    angular.module('app.widgets')
        .controller('DirectiveBTemplate', DirectiveBTemplate)
        .directive('directiveB', DirectiveB);
    DirectiveBTemplate.$inject = ["$scope"];

    function DirectiveBTemplate($scope) {
        // I'm basically assigning ng-repeat scope and setting it to DirectiveBTemplate scope, them im retrieving data from ng-repeat.
        $scope = $scope.$parent.$parent;
        this.data = $scope.data;
    }