在大型应用程序中，我们的 Web 应用程序可能会组织成单独的部分页面，以增加我们应用程序的模块化。在某些情况下，使用 Angular $http.get 或 JQuery $.load 编译通过 XHR 或 Ajax 请求加载的部分页面会引入错误。

以我的场景为例，我正在使用 Kohana PHP 框架，因此我可以在服务器级别控制我的 Web 应用程序的模块化。像往常一样，所有模板和页面都被分离到 View 中，将所有 HTML、JS 和 CSS 留在表示层上。

这将为我在客户端处理上实现 Javascript MVW/MVC 堆栈提供极大的灵 active ，因为我的 Web 应用程序严重依赖 AJAX 请求从后端应用程序获取数据。在我的场景中，我使用的是 AngularJS，下面是关于如何将模型中的数据呈现给客户端的简单伪造。

Kohana Model > Kohana Controller > Kohana View > XHR > JQuery\Angular > DOM

我在申请中的一个 Angular 色确实让我兴奋不已，让我喝了几瓶新陈代谢饮料来解决申请问题。我有一个模态对话框，部分页面通过 XHR 从服务器加载并将其附加到选定的 DOM。

问题是当 Angular 尝试编译部分页面时，当它找到 ng-controller 指令时，它将寻找引用已处理指令的函数。错误是在找不到 Controller 的地方产生的，因为它还没有被 DOM 解析器评估。但是，当您在加载部分页面之前在应用程序中的某处预定义该功能时，一切正常。下面是我如何设置对话服务的示例，当我单击上述链接时，该服务将从链接指令中调用。

var dialogService = angular.module('dialog.service', []);
dialogService.factory('Dialog', function($http,$compile){
    var dialogService = {};
    dialogService.load = function(url, scope){
        $("#dialog:ui-dialog").dialog( "destroy" );
        $("#dialog").attr('title','Atlantis');

        $http.get(url).success(function (data) {
            html = $compile(data)(scope);
            $('#dialog-content').html(html);

            $("#dialog").dialog({
                width: '600px',
                buttons: {
                    "Ok": function() {
                        $( this ).dialog( "close" );
                        return true;
                    },
                },
                close: function(){
                    if (typeof (onClose) == 'function') { onClose(); }
                },
            });
        });
    }

    return dialogService;
});

经过一些研究，我找到了一些解决方案，并与其他人分享了我对像我这样的初学者的回答。 (对不起我的英语)。

最佳答案

AngularJS 在此设置上没有任何问题，其他 JS 大师可能已经知道解决方案并且非常忙于与我们分享，同时发明另一​​个很酷的 Web 开发工具或框架。没关系，继续这样做。这可能不是一个很酷或最后通牒的解决方案，请与我们分享任何改进或提示!

为了克服这个问题，我们需要设置策略，让我从示例代码开始，以便我们的大脑在信息流过时进行消化。下面的代码是我使用 JQuery 创建模式对话框的占位符，Ajax 内容将被插入。

<div ng-app="asng" id="dialog" title="" style="display:none">
     <div id="dialog-content"></div>
</div>

作为基础知识，我们必须了解 DOM 解析器是如何工作的。我们可能认为 DOMP (DOM Parser) 是多线程的，这就是我们可以并行加载多个外部资源的原因。实际上 DOMP 在从上到下解析 DOM 元素索引时是单线程的。下面是我要加载到#dialog-content DIV 元素中的部分页面的示例。

<script language="JavaScript" type="text/javascript">
    function Transaction ($scope,$http){
        $scope.items = [{"country":"VN","quantity":"100"}];
        $scope.country_name = $scope.items;
    }
</script>

<style>
</style>

<div id="transaction-panel" class="user" data-ng-controller="Transaction">
        <form id="{{ form_name }}" action="">
        Country : [[ items.country ]] </br>
        Total : [[ items.quantity ]]
    </form>
</div>

实际上这些部分仍然会出错，尽管我们已经将脚本 block 放在带有 ng-controller 指令的元素之前。实际上情况并非如此，我们需要解决的部分是 AngularJS 编译服务如何编译部分 DOM。让我们回到我上面的问题部分，检查我们在哪里进行编译。

html = $compile(data)(scope);
$('#dialog-content').html(html);

上面的第一行将在数据变量中编译 DOM，并插入到根 DOM 不幸的是第一行会报错:Controller Transaction not found。

发生这种情况是因为您的部分页面中的 Script Block 尚未被 DOMP 解析器评估，因为它未插入到根 DOMP 中。现在你明白了，所以我们必须稍微改变编译策略，插入新的 DOM，然后我们将解析插入的 DOM，如下所示:-

html = $('#dialog-content').html(data);
$compile(html)(scope);

纤细而简单的解决方案，我花了几个上午的时间才解决这个问题，只是因为忽略了 DOM 解析的简单概念。

关于javascript - 使用 Angular 加载部分页面并编译 Controller ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12987001/