加载部分页面具有角和编译器 [英] Loading Partial Page With Angular and Compile The Controller

问题描述

在大规模应用，我们的Web应用程序可能会组织成独立的部分页面，以提高我们的应用程序的模块化。在某些情况下，通过编译或XHR Ajax请求加载的部分页面或者使用角$ http.get或JQuery的$ .load将引入一个错误。

In large scale application, our web application might be organize into separate partial page in order to increase the modularity of our application. In some case compiling a partial page loaded through XHR or Ajax request either using Angular $http.get or JQuery $.load will introduce an error.

使用我的情况为例，正是我使用Kohana的PHP框架，这样我可以控制在服务器级别我的Web应用程序的模块化。像往常一样，所有的模板，页面被单独进入视野，使所有的HTML，JS和CSS一起presentation层上。

Using my scenario as example, exactly I'm using Kohana PHP framework so i can control the modularity of my web application on the server level. As usual all template and page been separate into view, leaving all HTML, JS and CSS together on presentation layer.

这将给人一种极大的灵活性，我实现的Javascript MVW / MVC在客户端处理堆栈作为我的web应用程序都严重依赖于AJAX请求来从后端应用程序的数据。在我的情况IM使用AngularJS以下是从型号$ P $的数据如何psented客户一个简单的假。

This will giving an great flexibility for me to implement the Javascript MVW/MVC stack on client side processing as my web app are heavily depend on AJAX request to fetch data from back end application. In my scenario im using AngularJS and below is a simple pseudo on how the data from Model presented to client.

Kohana的型号> Kohana的控制器>的Kohana查看> XHR> JQuery的\\角> DOM

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

我的一个在我的应用程序的一部分，真正给我的撞击，让我喝饮料的新陈代谢的几瓶解决了应用。是我从通过服务器XHR有模态对话框和部分页面是负载，并连接到选定的DOM。

One of my part in my application that really give me bump and get me drink few bottles of metabolism drink to solve the application. Is where i have a Modal dialog and the partial page are load through XHR from server and attached it to selected DOM.

问题是，当角试图编译局部页面，当它发现了NG-控制器的指令将会寻找指的是处理指令的功能。错误是农产品，其中控制器找不到，因为它尚未被DOM解析器评估。但是，当你$ P $应用程序中的某个地方对delare功能只是你的负荷前的部分页面，一切正常。下面是关于例子，如何我安装一个对话框服务，将链接指令时，我点击了链接，说叫。

The problem is when Angular try to compile the partial page, when it found the ng-controller directive it will be looking for the function referring to the processed directive. Error were produce where the controller is not found as it not yet evaluated by DOM parser. But when you pre-delare the function somewhere in your application just before your load the partial page, everything is OK. Below is the example on how i setup a Dialog service that will be called from link directive when i clicked the said 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;
});

经过一番研究，我已经找到了一些解决方案，并与伙计们对我的回答是共享给别人初学者喜欢我。 （对不起我的英文）。

After some research i have found some solution and sharing it with fellas on my answer for others beginner like me. (sorry for my English).

推荐答案

有什么错上此设置AngularJS，其他JS大师那里可能已经知道了解决方案，并非常繁忙，而发明另一个很酷的Web开发工具与我们分享或框架。这是确定的，这样就够了。这可能不是一个很酷的或最后通牒的解决方案，请分享任何改进或提示我们！

There's nothing wrong on AngularJS on this setup, others JS guru out there might already know the solution and very busy to share with us while inventing another cool web development tools or framework. That's OK keep doing that. This might not be a cool or ultimatum solution, please share any improvement or tips with us!

要解决这个问题，我们需要的策略设置，让我从一个例子开始code这样的信息流通过，而我们的大脑将消化。低于code是我创建一个使用jQuery和Ajax的内容将插入模态对话框中的占位符。

To overcome this problem we need s strategy to setup, let me start with an example code so our brain will digest while the information flowing through. Below code is the placeholder where i create the the modal dialog using JQuery and the Ajax content will be insert.

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

作为一个基本知识，我们要了解如何DOM解析器都在工作。我们可能会认为DOMP（DOM解析器）是一个多线程的，这就是我们可以并行加载多个外部资源的原因。其实DOMP是单线程在解析DOM元素的索引从上到下。下面是我会加载到＃对话框的内容DIV元素部分页面上的例子。

As a basic knowledge, we have to understand on how DOM parser are working. We might think that DOMP (DOM Parser) is a multi-threaded and that's the reason we can load multiple external resource in parallel. Actually DOMP are single threaded while parsing the DOM elements index from top to bottom. Below is the example on the partial page that I'm gonna load into #dialog-content DIV element.

<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-控制器指令中的元素之前。其实这不是真正的情况下，我们需要解决的部分是如何AngularJS编译服务正在整理部分DOM。让我们回到我的问题上面的部分和检查的地方，我们做的事情编译行。

Actually these partial still giving an error, although we have put the script block just before the element with ng-controller directive. Actually that's not really the case, the part that we need to tackle is how AngularJS compile service are compiling the partial DOM. Let go back on my question part above and inspect where the line that we do the compile thing.

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

第一线的上方将编译DOM数据变量，并插入到根DOM不幸的是第一行会喊一个错误：未找到控制器交易

First line above will compile DOM in data variable, and insert into the root DOM unfortunately first line will shout an error : Controller Transaction not found.

这发生，因为，在脚本块在你的部分页面尚未被DOMP解析器，因为没有插入根DOMP评价即可。现在你看到了光明行，所以我们必须改变策略编译了一下，通过插入新的DOM，然后我们将解析回插入的DOM看看下面的例子： -

This happen because, the Script Block in your partial page is not yet evaluate by DOMP parser because is not inserted into the root DOMP. Now you see the light OK, so we have to change the compiling strategy a bit, by inserting the new DOM and then we will parse back the inserted DOM look example below:-

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

斯利姆和简单的解决方案，它早上把我几头撞来解决，只是因为无视DOM解析的简单的概念这个问题。

Slim and simple solution, it took me few head banging morning to solve this problem just because ignoring the simple concept on DOM parsing.

这篇关于加载部分页面具有角和编译器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！