javascript - AngularJS 指令嵌套 ng-transinclude 内的隔离范围

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: "="
       }
    };
});

项目列表.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>

下面的指令仅返回传递给它的任何模板的 URL。这样我就可以通过进一步的嵌套嵌入添加额外的 html。

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

这是一个示例模板(再次极其简化，只是为了向您展示布局)

个人资料模板.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 Controller 中，您可以使用如下代码从 item-list 访问更高的范围:

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