如何在指令模板中將已包含元素的范圍更改為ng重復項范圍

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>

...

內部指令B指令

(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中的“數據”作為傳遞范圍傳遞？

我想看的是：

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

Answer 1

我能夠以一種非常骯臟的方式做到這一點。

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

Answer 2

恩，可惜沒人問這個問題。 對於可能正在尋找答案的人：

實際上，您可以為要在指令中嵌入的元素提供所需的任何作用域-您只需要為此使用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>