focus on specific div when controller load first time 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();
});

This is my code i want when page load focus go to specific div but this is not working because my controller load before html page load fully. Even i have tried using window.onload but that also doesn't work for me. please suggest some way to do so.

this is my html code:

<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-->

Just check the links: stackoverflow.com/questions/15458609/… stackoverflow.com/questions/27194805/… — choudhury smrutiranjan parida
– choudhury smrutiranjan parida, Commented Oct 6, 2016 at 5:32

Joseph · Accepted Answer · 2016-10-06 05:35:43Z

0

You can add the data-ng-init attribute to the element which you need to focus. This will wait until the element has been loaded, and fire a function when it has been.

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

You're generally not supposed to use data-ng-init this way, but in this case it should work fine and shouldn't cause any issues.

answered Oct 6, 2016 at 5:35

Joseph

8656 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Joseph Over a year ago

@pooja Did you try window.onload or $window.onload? $window is angular's version of window, and might work better.

pooja Over a year ago

yes i try $window.onload but still facing same issue.If i first time load the page it go to that div then suddenly it go in bottom. If go to bottom and at same time i refresh that page then that focus first go my specific div and suddenly it come back at bottom.

Krupesh Kotecha · Accepted Answer · 2016-10-06 06:46:10Z

0

Try this

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>

edited Oct 6, 2016 at 6:46

answered Oct 6, 2016 at 6:19

Krupesh Kotecha

2,4123 gold badges23 silver badges40 bronze badges

11 Comments

pooja Over a year ago

this solution is creating issue. When i try to go my page it changes my url from localhost:8888/services to localhost:8888/services#bookNowDiv. Due to this i am not able to go to my page.

Krupesh Kotecha Over a year ago

I have updated my code. now your url does not change.

pooja Over a year ago

it work a bit for me but i am have a issue. when i scroll down at bottom and at same time at bottom i refresh the page then first focus come to that specific div and suddenly it come back at bottom. No idea how

Krupesh Kotecha Over a year ago

Each time you refresh page, controller is reloaded. so what you want? you want to focus div only for single time?

pooja Over a year ago

i want to focus that div whenever page load but it is not focusing that div . when page load it focuses that div for second and suddenly it changes.

|

Collectives™ on Stack Overflow

focus on specific div when controller load first time angularjs

2 Answers 2

2 Comments

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related