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

您可以将data-ng-init属性添加到需要关注的元素中。这将等到元素加载后，并在函数发出时触发。

;with cte as (
    select *, COUNT(*) over (partition by country) cnt
    from table1
), t3 as (
    select distinct top 3 country, cnt
    from cte order by cnt desc
)
select distinct * 
from cte
inner join t3 on cte.country = t3.country

您通常不应该以这种方式使用data-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>

当控制器加载第一次angularjs时，专注于特定的div

2 个答案: