AngularJS 嵌套 ng-transclude 中的指令隔离范围

Question

我在互联网上到处寻找类似的东西，但我仍然找不到答案。

我有一个在整个应用程序中重复使用的指令，它允许用户对项目列表进行排序和搜索。我有多种可以传递给指令的项目（我传递的 html 模板）以及这些模板的多种用途。即，有时我想要该模板上的某个按钮，但有时我想要另一个。（这将在一分钟内更有意义）。

因此，为了实现这一点，我创建了多个带有嵌入的指令。但是，我在范围界定方面遇到了严重的问题，而且我似乎无法弄清楚如何将隔离范围传递给子指令。

下面是我的代码：

物品清单指令

var app = angular.module('main');

app.directive('itemList', function(){
    var linkFunction = function (scope, element, attributes, ctrl, transclude) {
        //Things that modify the scope here. This scope is what I want to pass down to the child directives
        //NOTE: I do not currently have a working transclude function which is why I didn't include it here because I have no idea what to do with it
       scope.pagedItems = groupItemsToPages(items);
       scope.currentPage = 0;
    };

    return {
       restrict: 'E',
       replace: 'true',
       transclude: true,
       templateUrl: 'partials/directives/item-list.html',
       link: linkFunction,
       scope: {
           searchPlaceholder: "@",
           items: "=",
           control: "="
       }
    };
});

项目-list.html

<div class="form-group">
    <!-- I won't put all of the html here, just some to show you what i'm going for -->

     <div class="search-field">
         <input type="text" ng-model="query.value" placeholder="{{searchPlaceholder}}/>
     </div>

     <table class="table table-hover">
         <tbody>
             <tr ng-repeat="item in pagedItems[currentPage]">
                  <td ng-transclude></td>
             </tr>
         </tbody>
     </table>

</div>

这是简单地 returns 传递给它的任何模板的 URL 的指令。这样我就可以通过进一步的嵌套嵌入添加额外的 html。

项目-template.js

var app = angular.module('main');

app.directive('itemTemplate', function() {
    return {
        restrict: 'AE',
        replace: 'true',
        transclude: true,
        templateUrl: function(tElement, tAttrs){
            return tAttrs.templateUrl;
        }
    };
});

这是一个示例模板（再次极度简化，只是为了向您展示布局）

简介-template.html

<div>
    <p>item.name</p>
    <p>item.description</p>
</div>
<div ng-transclude></div>

下面是调用此代码的 HTML 的示例

tab.html

<div class="tab">
    <div class="available-items">
        <item-list control="profileControl" search-placeholder="Search Profiles" items="profileControl.profiles">
            <item-template template-url="partials/profile-template.html">
                <button type="button" ng-click="launchProfile(item.id)">Launch Profile</button>
            </item-template>
        </item-list>
    </div>
</div>

现在您已经看到了代码。我遇到的问题是我的 profile-template.html 包含没有从它上面的指令中获取范围，即使我已经尝试将范围克隆到它。我见过的所有示例都要求您从指令中删除模板键，并假设您只返回包含在代码中的代码。就我而言，我还有其他 html 想在模板中显示。

如有任何帮助，我们将不胜感激

Answer 1

您可以使用 $parent 属性并访问更高的范围，而不是尝试在指令之间传递范围。

例如，在您的 item-template 控制器中，您可以使用如下代码从 item-list 访问更高范围：

if ($parent.searchPlaceholder === '') {
    ...
}

AngularJS 嵌套 ng-transclude 中的指令隔离范围

AngularJS Directive Isolated scope inside nested ng-transclude

javascript

angularjs

angularjs-scope

angularjs-ng-transclude