javascript - 在页面丢失范围内包含转 Angular 的ngIncludes

我正在尝试构建模块化的ngInclude。通过这个，我的意思是ngIncluded JSP将提取所需的所有依赖项，并在呈现之前重新编译自身。

同一文件在单个页面上被多次使用。主页上有几个选项卡-所有选项卡都使用ngInclude以及一些不同的查询字符串参数。另外，在每个页面上，我都有包含文件的“预览”版本，然后当他们单击预览时，会弹出一个模式，该模式再次ngIncludes同一文件，但是具有另一个查询字符串参数，将其置于编辑模式。

除了IE9（gah）之外，我已经可以在所有地方使用它了，当然，我必须支持IE9，并且必须重构所有内容。因为要使此ngInclude模块化并使其包含所有其自己的依赖项，所以每次将其包含ngInclude时，它都会再次引入这些相同的依赖项。在更现代的浏览器中，这可以更优雅地处理，这很好，但是在IE9中，它会被multiple directives asking for template或multiple directives asking for transclusion炸毁。我能找到的唯一适用于我的情况的线索表明，这是因为依赖项被多次拉出。而且，到目前为止，我已经能够完成工作，我已经证实情况确实如此。

所以，我在这里。我试图通过仅引入一次依赖关系（使用RequireJS）来使这项工作有效。我没有使用路线。我可以在初始页面加载时使用它，但是一旦更改选项卡或打开编辑模式（这两个操作都导致另一个ngInclude），我什么也得不到。我从字面上得到一个空白页。

我放入了console.log，可以看到操作顺序是应该的（击中了我的recompile指令，它通过$compile一直执行所有操作，然后击中了内部指令）。我还可以使用浏览器控制台访问$('selectorForController').scope().items或$('selectorForController').scope().params并确认它们具有我期望的数据。问题是由于某种原因视图没有更新（这是我期望$compile触发的结果）。

应用定义：

var providers = {};
var myApp = angular.module('myApp', ['ngSanitize', 'ngAnimate', 'ngResource', 'pascalprecht.translate', 'angularFileUpload', function($controllerProvider, $compileProvider, $provide) {
    providers = {
        $controllerProvider : $controllerProvider,
        $compileProvider : $compileProvider,
        $provide : $provide
    };
}]);
var queueLen = myApp._invokeQueue.length;

ng包含的JSP：

<jsp:include page="profileIncludeListTemplate.jsp"/> <%-- Contains the profileItemList.jsp ng-template --%>
<jsp:include page="profileIncludePanelTemplate.jsp"/> <%-- Contains the profileItemPageRightPanel.jsp ng-template --%>

<script type="text/javascript">
    // Define itemsData and params here
</script>

<%-- One of my iterations was trying to use a directive I called lazyscript to load in all of the dependencies and then recompile, but that didn't work --%>
<%--<lazyscript data-src="/assets/js/profile/profileItemPageService.js"></lazyscript>--%>
<%--<lazyscript data-src="/assets/js/profile/profileItemService.js"></lazyscript>--%>
<%--<lazyscript data-src="/assets/js/profile/profileIncludeController.js"></lazyscript>--%>
<%--<lazyscript data-src="/assets/js/profile/profileIncludeDirectives.js"></lazyscript>--%>

<%-- Another iteration was trying to get it to work this way, where I also wrote a directive to overload the default script tag and recompile if necessary, but that didn't work either --%>
<%--<script src="/assets/js/profile/profileItemPageService.js" type="text/javascript"></script>--%>
<%--<script src="/assets/js/profile/profileItemService.js" type="text/javascript"></script>--%>
<%--<script src="/assets/js/profile/profileIncludeDirectives.js" type="text/javascript"></script>--%>
<%--<script src="/assets/js/profile/profileIncludeController.js" type="text/javascript"></script>--%>

<%-- I can't define the ngController here because it will throw an error on initial load and stop the rest of the execution, so I have the recompile apply it --%>
<%-- So I ultimately settled on this, which defines which dependencies need to be pulled in so that I can hand that list to Require --%>
<div
    data-recompile
    data-recompile-controller="ProfileIncludeCtrl"
    data-recompile-dependencies="/assets/js/profile/profileItemPageService.js,/assets/js/profile/profileItemService.js,/assets/js/profile/profileIncludeController.js,/assets/js/profile/profileIncludeDirectives.js"
    data-recompile-finished="false"
    class="profile-include"
    data-ng-class="{'form-horizontal': !params.edit}">

    <profile-item-list-directive></profile-item-list-directive>
    <profile-item-page-right-panel-directive></profile-item-page-right-panel-directive>
</div>

重新编译指令：

myApp.directive('recompile', function($window, $q) {
    return {
        restrict: 'A',
        link: function ($scope, elem, attrs) {
            if($(elem).attr('data-recompile-finished') == 'true') return;
            var dependencies = $(elem).attr('data-recompile-dependencies').split(',');

            function recompiler() {
                $(elem).attr('data-recompile-finished', 'true');
                $(elem).attr('data-ng-controller', $(elem).attr('data-recompile-controller')); // Link the angular controller

                var queue = myApp._invokeQueue;
                for (var i = queueLen; i < queue.length; i++) {
                    var call = queue[i];
                    var provider = providers[call[0]];
                    if (provider) {
                        provider[call[1]].apply(provider, call[2]);
                    }
                }

                if ($('[data-ng-app="myApp"]').injector()) {
                    $('[data-ng-app="myApp"]').injector().invoke(function ($compile, $rootScope) {
                        $compile($(elem))($rootScope);
                    });
                }
            }

            requirejs(dependencies, recompiler);
        }
    };
});

外部控制器的相关部分（在profileIncludeController.js中定义）：

myApp.controller('ProfileIncludeCtrl', function($scope, $rootScope, $resource, $timeout, ProfileItemService, ProfileItemPageService) {
    $scope.items = [];
    $scope.params = [];

    $scope.params = buildParamsObject(params);
    $scope.items = itemsData.data || [];
});

指令的相关部分（在profileIncludeDirectives.js中定义）。之所以将这些指令排除在外是因为它们需要能够访问彼此的作用域以及ProfileIncludeCtrl中的某些功能，因为这些功能实际上并不属于任何一个指令。

myApp.directive('profileItemListDirective', function($rootScope, $timeout) {
    return {
        restrict : 'E',
        templateUrl : 'profileItemList.jsp',
        replace: true,
        transclude : true,
        scope : true,
        controller : function($scope, ProfileItemService, ProfileItemPageService) {
            console.log("listDirective controller");
        },
        link : function($scope, element, attrs) {
            console.log("listDirective link");
        }
    };
});

myApp.directive('profileItemPageRightPanelDirective', function($rootScope, $timeout) {
    return {
        restrict : 'E',
        templateUrl : 'profileItemPageRightPanel.jsp',
        replace: true,
        transclude : true,
        scope : true,
        controller : function($scope, ProfileItemService, ProfileItemPageService) {
            console.log("panelDirective controller");
        },
        link : function($scope, element, attrs) {
            console.log("panelDirective link");
            // $scope.params is not defined here, but I need and expect it to be
        }
    };
});

任何指导将不胜感激！

最佳答案

事实证明，我可以通过稍微更改重新编译功能来修复它。使用$controller服务并将$ngControllerController数据属性放在子级上是这样做的主要思想。

function recompiler() {
    var ctrl = $elem.attr('data-recompile-controller');
    $elem.attr('data-ng-controller', ctrl); // This is for aesthetics only

    $elem.removeAttr("data-recompile")
            .removeAttr("recompile")
            .removeAttr("data-recompile-controller")
            .removeAttr("recompile-controller")
            .removeAttr("data-recompile-dependencies")
            .removeAttr("recompile-dependencies");

    var queue = myApp._invokeQueue;
    for (var i = 0; i < queue.length; i++) {
        var call = queue[i];
        var provider = providers[call[0]];
        if (provider) {
            provider[call[1]].apply(provider, call[2]);
        }
    }

    var templateCtrl = $controller( ctrl, { $scope: $scope } );
    $elem.children().data('$ngControllerController', templateCtrl);
    $compile( $elem.contents() )( $scope );
}