大概思路是这样的,一个商城,它的登陆是按需加载的,登陆后本页不动,局部内容刷新。
点击那个登陆,然后使用$.ajax向后台php请求插件'login',php会去插件库查找,将login的html读出来,然后扫描里边的包含文件,包括css及js,css插在前边,js插在后边,然后把整体返回,返回的内容插入到body中
这部分是登陆那块的代码
/**
* 顶用户菜单
*/
define('toplinks',function(require,exports,module){
//鼠标指向用户菜单时,菜单下滑
var oJQ=$(".TOPLINKS").on('mouseenter', '.USERMENU', function(event) {
$(this).addClass('on').find('dd ul').stop(true).slideDown();
}).on('mouseleave', '.USERMENU', function(event) {
$(this).find('dd ul').stop(true).slideUp(function(){
$(".USERMENU").removeClass('on');
});
});
//根据用户登陆状态来判断显示菜单的哪一部分
angular.module('Main')
.controller("CtrlTopLinks",['$scope','$timeout','$rootScope',function($scope,$timeout,$rootScope){
$scope.online;
//登录动作,召唤登录框
$scope.login=function(fCallback){
loadPlugin("login",function(){
$rootScope.$broadcast('startLogin',fCallback);
// angular.element(".LOGIN").scope().open(fCallback);
});
}
//登出动作,发送登出事件
$scope.logout=function(fCallback){
$timeout(function(){
$scope.online=false;
//发送登出事件
$rootScope.$broadcast('logout');
$timeout(function(){
show();
$.isFunction(fCallback) && fCallback();
},100);
},100);
}
//接收登录成功事件
$scope.$on('login',function(event){
show();
});
}]);
function show(){
oJQ.children().css({
visibility: 'visible'
})
}
show();
return ;
});
seajs.use('toplinks');
点击“登陆”其实就是调用这段里边作用域上的$scope.login方法,它会将登陆插件的所有内容读出,然后塞到body里边。但是塞进来后,登陆插件也不显示,而且上边都不加上ng-scope类,下边是登录插件的js部分。
define('LOGIN',function(require,exports,module){
var LOGIN=$(".LOGIN"),
container=LOGIN.closest('.FullScreenPlugin');
angular.module('Main')
.controller('CtrlLogin',['$scope','$timeout','$rootScope',function($scope,$timeout,$rootScope){
alert(1);
$scope.judge=function(name){
return $("#"+name).val() ? 'ng-filled' : 'ng-empty';
}
//打开及关闭登录插件
$scope.open=function(fCallback){}
$scope.close=function(){}
$scope.loginOK=angular.noop;
var fAfterLogin=angular.noop;
//向后台请求登录
$scope.login=function(){}
//重置表单为空
$scope.reset=function(){}
//接收启动登录事件
$scope.$on('startLogin',function(event,fCallback){
$scope.open(fCallback);
})
}]);
//angular.element(document).injector().invoke(function($compile){
// var scope=angular.element(LOGIN).scope();
// $compile(LOGIN)(scope);
//});
// angular.bootstrap(LOGIN,['Login']);
//点过再失焦后,更换成触摸类
$(".ng-untouched",LOGIN).one('blur', function(event) {
$(this).removeClass('ng-untouched').addClass('ng-touched');
});
return ;
});
seajs.use('LOGIN');
写到这里就不知道应该怎么处理了,请各位大侠帮忙。
按需加载找一个懒加载插件就可以了,写angular时间不长,现在就用过
oclazyLoad
,题主可以看看如何使用