相关疑难解决方法(0)

在大规模应用程序中,我们的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;
});

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