сосредоточиться на конкретном 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

Вы можете добавить данные-нг-инициализации атрибута элемента, который вам нужно сосредоточиться. Это будет ждать, пока элемент будет загружен, и запустите функцию, когда она была.

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

Вы вообще не должны использовать данные-нг-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>