如何在頁面加載完成之后調用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 = '預約失?。″e誤碼為：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 = '預約失?。″e誤碼為：'+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)//為什么沒有出來}
如何在頁面加載完成之后調用angularJsr的控制器里的方法
慕前端8664132
2016-11-02 20:24:38
