如何在页面加载完成之后调用angularJsr的控制器里的方法

如何在页面加载完成之后调用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)//为什么没有出来

}



慕前端8664132
浏览 4884回答 1
1回答

慕用0418482

data-ng-init
打开App,查看更多内容
随时随地看视频慕课网APP