角度多重包含在页面丢失范围上的转换（？）

Question

我正在尝试构建模块化的ngInclude。通过这个，我的意思是ngIncluded JSP将引入它需要的所有依赖项并在渲染之前重新编译它。

同一个文件在一个页面上多次使用。主页面有几个选项卡 - 所有这些选项卡都使用此ngInclude，只是使用了一些不同的查询字符串参数。此外，在每个页面上，我都有一个＆＃34;预览＆＃34;包含文件的版本，然后当他们点击预览时弹出一个模态，再次ngIncludes相同的文件，但有另一个查询字符串参数，使其处于编辑模式。

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

所以，我在这里。我试图通过仅引入一次依赖项（使用RequireJS）来完成这项工作。我没有使用路线。我有它在初始页面加载，但一旦我更改标签或打开编辑模式（这两个动作导致另一个ngInclude），我什么都得不到。我真的得到一个空白页。

我已经输入了console.log并且可以看到操作的顺序是应该的（点击我的重新编译指令，它会一直完成$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;

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

任何指导都将不胜感激！

Answer 1

原来我可以通过稍微改变我的重编译功能来修复它。使用$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 );
}