如何在页面加载完成之后调用angularJsr的控制器里的方法
<!DOCTYPE html>
<html ng-app="kaifanla">
<head>
<meta charset="UTF-8">
<title>水滴保险</title>
<link rel="stylesheet" href="jqm/jquery.mobile-1.4.5.css"/>
<link rel="stylesheet" href="css/kaifanla.css"/>
<link rel="stylesheet" href="css/oyb2.min.css" />
<link rel="stylesheet" href="csss/jquery.mobile.icons.min.css" />
<script src="js/jquery-1.11.3.js"></script>
<script src="jqm/jquery.mobile-1.4.5.js"></script>
<script src="js/angular.js"></script>
<script src="js/kaifanla.js"></script>
</head>
<body ng-controller="parentCtr" >
<div data-role="page">
<div>
<div ng-click="jump('tpl/main.html')">
<h2 style="z-index:99">保险让生活更美好</h2> <!--目的:想在页面加载完成之后让此标题做一些动画事件,如:跳着出来等等。我又想把这样的方法写在控制器里的(模块化编程)可是没有实现?-->
<video autoplay loop>
<source src="videos/spring.mp4" style="z-index:1"/>
</video>
</div>
</div>
</div>
</body>
</html>
<!--js代码-->
/**
* Created by Administrator on 2016/3/20.
*/
angular.module('kaifanla',[]).
controller('parentCtr',function($scope){
$scope.jump = function(routPath){
//$location.path(routPath);
console.log($)
$.mobile.changePage(routPath,{transition:'pop'});
};
$(document).on('pagecreate', function (event) {
//监听到了page的创建
//console.log('page is creating....');
//获取要加载到的容器
var page = event.target;
//获取作用域对象
var scope = $(page).scope();
//获取注入器对象
var injector = $(page).injector();
//调用注入器,为程序提供$compile服务
injector.invoke(function($compile){
//编译并链接DOM节点
$compile(page)(scope);
scope.$digest();
});
})
/*$(document).on("ready",function(){
alert(1)同样没有出来
})*/
}).controller('startCtr',function($scope){
}).controller('mainCtr',function($rootScope,$scope,$http){
/*加载数据*/
$scope.hasMore = true; //是否还有更多数据可供加载
//$scope.dishList = []; //用于保存所有商品品数据的数组
//控制器初始化/页面加载时,从服务器读取最前面的5条记录
$http.get('../data/dish_getbypage.php?start=0').
success(function(data){
$scope.dishList = data;//$scope.dishList.concat(data);
});
//“加载更多”按钮的单击事件处理函数:每点击一次,加载更多的5条数据
$scope.loadMore = function(){
$http.get('../data/dish_getbypage.php?start='+$scope.dishList.length).
success(function(data){
if(data.length<5){ //服务器返回的菜品数量不足5条
$scope.hasMore = false;
}
$scope.dishList = $scope.dishList.concat(data);
});
}
//监视搜索框中的内容是否改变——监视 kw Model变量
$scope.$watch('kw', function(){
if( $scope.kw ){
$http.get('../data/dish_getbykw.php?kw='+$scope.kw).
success(function(data){
$scope.dishList = data;
})
}
});
$scope.showDetail=function(id){
$rootScope.dishid=id;
localStorage.setItem('id',id);
$scope.jump("detail.html");
}
}).controller('detailCtr',function($scope,$http,$rootScope){
//读取路由URL中的参数
//console.log($routeParams.dishid)
$http.get('../data/dish_getbyid.php?id='+$rootScope.dishid).
success(function(data){
//console.log('接收到服务器返回的菜品详情:')
//console.log(data);
$scope.dish = data[0];
})
}).controller('orderCtr',function($scope,$http,$rootScope){
//console.log($routeParams.dishid);
//定义order对象,用于保存order数据
$scope.order = {"did":$rootScope.dishid};
$scope.submitOrder = function(){
//$scope.succMsg = '预约成功!您的预约编号为:5。您可以在用户中心查看订单状态。';
//$scope.errMsg = '预约失败!错误码为:404';
//console.log($scope.order);
var str = jQuery.param($scope.order);
console.log(str);
$http.get('../data/order_add.php?'+str).
success(function(data){
//console.log(data[0].msg);
if(data[0].msg == 'succ'){
$scope.succMsg = '预约成功!您的预约编号为:'+data[0].did+'。您可以在用户中心查看订单状态。'
//记载用户手机号,用于查询订单
$rootScope.phone = $scope.order.phone;
}else {
$scope.errMsg = '预约失败!错误码为:'+data[0].reason;
}
//console.log($scope.succMsg);
//console.log($scope.errMsg);
});
}
}).controller('myorderCtr',function($scope,$http,$rootScope){
//console.log($rootScope.phone);
$http.get('../data/order_getbyphone.php?phone='+$rootScope.phone).
success(function(data){
$scope.orderList = data;
console.log(data);
});
$scope.showDetail=function(id){
localStorage.setItem('id',id);
$scope.jump('detail.html');
}
});
//window.onload=function(){
alert(1)//为什么没有出来
}
慕用0418482
相关分类