JQuery搭配

重要測試

[onload]

AngularJS → onload

1. AngularJS必須放在DOM後面
2. 執行順序會先是AngularJS，然後才是onload事件

code:

<div class="PageContent" ng-app="mainApp">
  <div ng-controller="mainCtrl">
    <input ng-model="show_box" value="" >
    show_box:<span ng-bind="show_box"></span>
  </div>
</div>
<script>
var mainApp = angular.module('mainApp', []);
mainApp.controller('mainCtrl', function($scope) {
    console.log('angular');
    $scope.show_box = "John";
});
window.onload = function(){
    console.log('onlaod js');
}
</script>

console:

angular
onlaod js

How to Onload?

透過run來執行

v1.5.8

程序:

1. window.onload
2. angularjs
3. angularjs controller
4. angularjs init
5. jquery onload
6. angularjs run

程式

<div class="PageContent" ng-app="mainApp">
  <div ng-controller="mainCtrl" ng-init="onloadEvent()">
    <input ng-model="show_box" value="" >
    show_box:<span ng-bind="show_box"></span>
  </div>
</div>
<!-- Angular START -->
<script>
var mainApp = angular.module('mainApp', []);
mainApp.run(['$window', function($window) {
    $(function(){
        console.log('step: angular run');
    });
}]);
mainApp.controller('mainCtrl', function($scope) {
    console.log('step: angular controller of mainCtrl');
    $scope.show_box = "John";
    $scope.onloadEvent = function(){
        console.log('step: angular init');
    }
    $scope.onloadController = function(){
        console.log('step: angular controller method');
    }
    $scope.onloadController();
});
</script>
<!-- Angular End -->

結果:

step: window.onload
onload.html:42 step: angular controller of mainCtrl
onload.html:48 step: angular controller method
onload.html:45 step: angular init
onload.html:19 step: jquery onload
onload.html:38 step: angular run

以下方法在新的版本已經處理好囉!

各種執行順序如下:

1. angularJS載入
2. angular controller onload event
3. angular ng-init onload event

   透過ng-init

   注意: init要下在controller上喔

   controller內的程式跑完後就會執行

4. angularJS onload event

   透過 run(['$windwo',function(){}]) 執行

   所有的angularJS執行完成才會執行

5. JQuery onload event
6. window onload event

code:

<div class="PageContent" ng-app="mainApp">
  <div ng-controller="mainCtrl" ng-init="onloadEvent()">
    <input ng-model="show_box" value="" >
    show_box:<span ng-bind="show_box"></span>
  </div>
</div>
<script>
var mainApp = angular
    .module('mainApp', [])
    .run(['$window', function($window) {
        $(function(){
            console.log('angular onload');
        });
    }]);
mainApp.controller('mainCtrl', function($scope) {
    $scope.show_box = "John";    
    $scope.onloadEvent = function(){
        console.log('angular init onload');
    }
    $scope.onloadController = function(){
        console.log('angular controller onload');
    }
    $scope.onloadController();
    console.log('angular');
});
window.onload = function(){
    console.log('onlaod js');
}
$(function(){
    console.log('jquery onload');
});
</script>

console:

angular controller onload
angular
angular init onload
jquery onload
angular onload
onlaod js

[JQuery]

jquery本身是可以在AngularJS的controller使用! 不過jquery的onload事件無法使用