使用Angular和Compile加载部分页面控制器

Question

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

以我的场景为例，我正在使用Kohana PHP框架，因此我可以在服务器级别上控制我的Web应用程序的模块性。 像往常一样，所有模板和页面都分开进入视图，将所有HTML，JS和CSS放在表示层上。

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

Kohana模型> Kohana控制器> Kohana视图> XHR> JQuery \\ Angular> DOM

我的应用程序中的一部分，真的让我碰到并让我喝几瓶新陈代谢饮料来解决应用。 我有一个模态对话框，部分页面从服务器通过XHR加载，并将其附加到选定的DOM。

问题是当Angular尝试编译部分页面时，当它找到ng-controller指令时，它将查找引用已处理指令的函数。 由于DOM解析器尚未评估控制器，因此产生错误。 但是当你在加载部分页面之前在应用程序的某个地方预先启用该功能时，一切正常。 下面是我如何设置一个Dialog服务的例子，当我点击上述链接时，该服务将从link指令调用。

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

经过一些研究后，我找到了一些解决方案并与其他人一起分享了我对其他初学者的回答。 （对不起我的英语不好）。

Answer 1

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>

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

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

上面的第一行将在数据变量中编译DOM，并且插入到根DOM中，不幸的是第一行将发出错误：未找到Controller Transaction。

发生这种情况是因为，DOMP解析器尚未评估部分页面中的脚本块 ，因为未插入根DOMP中。 现在你看到了光线好了，所以我们必须通过插入新的DOM来改变编译策略，然后我们将解析下面插入的DOM外观示例： -

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

简洁而简单的解决方案，只是因为忽略了DOM解析的简单概念，我花了很少的时间来解决这个问题。

Answer 2

如果我理解你想要做什么，这是一个简单的例子。

我想通过AJAX发布到Django表单，然后用返回的标记替换页面中的表单内容。 返回的标记包含一个ng-controller，我需要在加载时执行：

.controller('MyForm', function($element, $compile, $scope){
    var scope = $scope;
    var $theForm = $element;
    var $formBlock = $element.find('.the_form');  // is replaced by the form response
    $element.find('.submit_the_form').click(function(){
        // submit the form and replace contents of $formBlock
        $.post($theForm.attr('action'), $theForm.serialize(), function(response){
            var newstuff = $formBlock.html(response);
            $compile(newstuff)(scope); // loads the angular stuff in the new markup
        });
    });
})

我认为您感兴趣的行是$ compile（newstuff）（范围）;

编辑：Crikey，今天早上用其他标记尝试了这个并且没有用，我无缘无故地弄明白。 原来，如果我没有分配ng-model的字段，在新标记中，则$ compile不会执行。 添加：

<input type="hidden" name="dummy" value="0" ng-model="dummy"/>

......现在它编译。