特定のdivに焦点コントローラ負荷初めてangularjs

Question

app.controller('homeCtrl', function($scope, $log, $location, $http, dataService, blockUI) { 
var self = $scope; 
self.init = function() { 
    $log.info("home controller loaded"); 
    $('html,body').animate({scrollTop: $("#services_div").offset().top-80},'slow'); 
}; 
self.init(); 
}); 

これは、ページのロード焦点は、特定のdivに行くが、これが原因でhtmlページをロードする前に、私のコントローラの負荷が完全に機能していないときに私が欲しい私のコードです。私もwindow.onloadを使用しようとしましたが、それはまた私のために動作しません。そうするための何らかの方法を提案してください。

これは私のhtmlコードです：

<section class="serviceBanner"> 
<div class="topBar"> 
    <div class="container group"> 
     <div class="breadcrums"> 
      <ul> 
       <li><a href="index.html">Home</a></li> 
       <li><a href="javascript:void(0);">Service We Offer</a></li> 
       <li>Car Servicing</li> 
      </ul> 
     </div> 
     <!--//breadcrums--> 
    </div> 
    <!--//container--> 
</div> 
<!--//topBar--> 

<div class="container" id="bookNowDiv"> 
    <div class="servicebanContent text-center"> 
     <h2>Our Services</h2> 
     <h1>Vehicle Servicing</h1> 
     <p>Every vehicle needs care and maintenance.</p> 
     <p>Get your vehicle serviced now, avoid breakdowns!</p> 
     <p class="banButton"> 
      <a href="service/vehicle" id="btnBookNow">BOOK NOW</a> 
     </p> 
    </div> 
    <!--//servicebanContent--> 
</div> 
<!--//container--> 

Answer 1

あなたが集中する必要がある要素にデータ-NG-INIT属性を追加することができます。これは、要素がロードされるまで待機し、要素があったときに関数を起動します。

<div name="element-to-focus" data-ng-init="init()"></div> 

あなたは、一般的にデータ-NG-のinitをこの方法を使用することになっていないが、この場合にはそれが正常に動作する必要がありますし、すべての問題が発生することはありません。

Answer 2

この

var app = angular.module('demo', []); 
 
app.controller('Ctrl', function($scope, $window) { 
 
    var $target = $("#email"); 
 
    $("body").animate({ 
 
    scrollTop: $target.offset().top 
 
    }, "slow"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="demo" ng-controller="Ctrl"> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div id="email">sdfsdfsdf</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
    <div>demo message</div> 
 
</div>