Question

基本上我要解决的是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。你可以玩它，帮我解决这个问题。

Answer 1

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

这个解决方案还暗示了配置功能的完全重新设计以及我试图在上面的描述中实现的几个指令的丢弃

传递对ng-include的引用

Plunker中的应用程序说明（TL; DR）

1 个答案: