动态传递对 ng-include 的引用答案

【问题标题】：Pass a reference to a ng-include dinamically动态传递对 ng-include 的引用
【发布时间】：2017-12-15 05:43:22
【问题描述】：

基本上我要解决的是this Plunker 的一个工作示例，其中在选项卡之间切换，我将使用相同的视图但将不同的参数传递给ng-include 来获得即将到来的访问和已完成的访问。

Plunker 中的应用说明 (TL;DR)

在我的应用程序 (AngularJS v1) 中，我正在使用一个模块来管理带有一些内置指令的选项卡 (this is the GitHub reference about it)。

使用这个插件，我试图在每个选项卡的正文中动态包含相同的视图（使用ng-include）。

<ng-tabs ng-class="">
    <ng-tab-head ng-repeat="itemTab in itemTabs" ng-class="{ 'tabHead': true, 'active': itemTab.active }">
        {{ itemTab.tabHeader }}
    </ng-tab-head>

    <ng-tab-body ng-repeat="itemTab in itemTabs" ng-class="{ 'tabBody': true, 'active': itemTab.active }">
        <div ng-include="'app/visits/user-visits.html'" onload="userVisits(itemTab.visitState)"></div>

        <div ng-include="'app/visits/empty-visits.html'"></div>
    </ng-tab-body>
</ng-tabs>

传递的数据是这样的（下面的数组可以动态包含2个以上的对象，这就是我在上面的代码中执行ng-repeat的原因）：

$scope.itemTabs = [
    {
        tabHeader: 'Upcoming Visits',
        visitState: 'allocated',
        active: true
    },
    {
        tabHeader: 'Completed Visits',
        visitState: 'completed',
        active: false
    }
];

标签正文 (user-visits.html) 中包含的第一个视图是一个简单的视图，它也重复了多次，它显示了有关从 API 请求返回的访问的一些详细信息，而第二个则显示如果有没有对该特定主体的访问（empty-visits.html），但这是已经由控制器管理的东西。 API 的 URL 是这样的：

'apiHost/api/users/visits?include=client,address&visit_state=' + visitState

基本上所有访问（即将到来的和已完成的）都来自同一个 API 请求，只是在 URL 中传递了不同的参数 visitState。这个参数是我想传递给包含视图的参数，以告诉管理请求的控制器已显示哪个选项卡，以便它必须执行哪个请求。

现在，我已经按照建议的here 和here 尝试了onload 属性，但这不起作用，建议的here 也不起作用。

我认为这是因为标签的内容在标签切换时应该刷新，因此内容不会只在onload时间加载一次。 我对这个想法有误吗？

目前发生的情况是标签插件工作正常（因为当我点击标签和here there is a working example 时我可以看到索引发生变化），但标签之间的内容没有变化，它是仅显示第一个选项（即将到来的访问）。

我也尝试过使用这个特定的指令

angular.module('app').directive('includeTemplate', directive);

function directive() {
    return {
        templateUrl: function (elem, attrs) {
            return attrs.includeTemplate;
        },
        restrict: 'EA',
        scope: {
            'includeVariables': '&'
        },
        link: function (scope, elem, attrs) {
            var vars = scope.includeVariables();
            Object.keys(vars).forEach(function (key) {
                scope[key] = vars[key];
            });
        }
    };
}

这是建议here，但我认为它也不起作用，因为它期望传入一个明确的值，而不是include-variables 的动态值。所以在标签正文中我已经使用了它

<div include-template="'app/visits/user-visits.html'" include-variables="{{ itemTab.visitState }}"></div>

我是不是哪里错了？

您是否遇到过这些动态关卡的问题？

正如开头所说，我创建了这个simplified Plunker，它显示了整个问题。你可以玩它，帮我解决这个问题。

【问题讨论】：

标签： javascript angularjs tabs

【解决方案1】：

我推出了 AngularJS UI-Router 作为这个问题的解决方案。

这个解决方案还意味着对配置函数进行了彻底的重新设计，并放弃了我在上面的描述中尝试实现的几个指令

【讨论】：