angularjs - 错误：[$compile:multidir] 多个指令 [ngSwitchWhen, ngInclude] 要求包含

Question

我需要一个使用 ng-include 预加载数据的解决方案，就像在这篇博文 preloading-data-before-executing-nginclude-in-angularjs中描述的那样。

似乎这个解决方案效果很好，但作者使用 angular 版本 1.0.7。我使用的是 1.2.1 版本，也尝试了 1.7.9 版本，结果是错误消息。

Error: [$compile:multidir] Multiple directives [ngSwitchWhen, ngInclude] asking for transclusion on: <div ng-switch-when="one" bn-preload="oneData" bn-include-log="" ng-include=" 'one.htm' ">

如何用较新的版本修复它，还是有更好的解决方案？

在我的项目中，我通过请求接收数据，并且 ng-include 应该等到请求结束并且要显示的数据可用。

编辑：

我的 HTML 代码是这样的

<div ng-init="validityList = validities.UploadList;" bn-preload="validities" ng-include="'/validity/list'"></div>

我项目中的错误是

Multiple directives [ngInclude, bnPreload] asking for transclusion on

Lemmy 建议的解决方案对我不起作用，因为 bn-preload 和 ng-include 需要在同一个元素上。

编辑2：

我不知道您所说的“bn-preload html”是什么意思。

这是我迄今为止在角度方面所做的。

const BaseApp = angular.module('BaseApp')
.factory('preloader', function ($q, $interval) {
    this.load = function (target) {
        const deferred = $q.defer();

        const loadData = $interval(function () {
            if ($q[target].length > 0) {
                deferred.resolve($q[target]);

                $interval.cancel(loadData);
            }
        }, 100);

        return (deferred.promise);
    }
})
.directive('bnPreload', function (preloader) {
    function compile(templateElement, templateAttribute, transclude) {
        function link($scope, element, attributes) {
            let injectedElement = null;
            let isDestroyed = false;

            preloader.load(attributes.bnPreload).then(
                function (preloadedData) {
                    if (isDestroyed) {
                        return;
                    }

                    $scope.setData(preloadedData);

                    transclude($scope, function (copy) {
                        element.after(injectedElement = copy);
                    });

                }
            );

            $scope.$on(
                '$destroy',
                function () {
                    isDestroyed = true;

                    $(injectedElement).remove();
                }
            );
        }

        return (link);
    }

    return ({
        compile: compile,
        priority: 250,
        terminal: true,
        transclude: 'element'
    });
})
.controller('validity', function ($scope, $http) {
    $http({
        method: 'POST',
        url: '/validity/getall'
    })
        .then(function (response) {
            $scope.validities = response.data;
        });
});

大多数代码与上面链接中的示例相同。

标签： angularjs