ng-include监听载入完成的3种方式

1. 针对单个引入文件设置onload属性

<div ng-app="myApp" ng-controller="sitesCtrl">
    <div data-ng-include="inner.html" onload="includeInit()">
</div>
<script type="text/javascript">
    var app = angular.module('myApp', []);
    app.controller('sitesCtrl', function($scope) {
        $scope.includeInit = function(){
            $scope.$broadcast('includeInit');
        }
        
        $scope.$on('includeInit',function(){
            console.log('include page finish.');
        });
    });
</script>

2. 针对单个引入文件设置ng-init事件

<div ng-app="myApp" ng-controller="sitesCtrl">
    <div data-ng-include="inner.html" data-ng-init="includeInit()">
</div>
<script type="text/javascript">
    var app = angular.module('myApp', []);
    app.controller('sitesCtrl', function($scope) {
        $scope.includeInit = function(){
             console.log('include page finish.');
        }
    });
</script>

3. 通过$rootScope对象监听全局的$includeContentLoaded事件

<div ng-app="myApp" ng-controller="sitesCtrl">
    <div data-ng-include="inner.html">
</div>
<script type="text/javascript">
    var app = angular.module('myApp', []);
    app.run(['$rootScope',function($rootScope){
        $rootScope.$on('$includeContentLoaded',function(){
            console.log('include page finish.');
        })
    }]);
</script>