Javascript Angularjs无法在页面加载时自动滚动到ng include部分

当我输入url时，例如

localhost:8080/contact

，我的

stateProvider

工作正常，但页面不会自动滚动到

ng include

代码部分

在app.js中：

$stateProvider
        .state('about', {
            url: '/about',          
            onEnter: function() {
              if ($("#section-1").offset() != null) {
                 $('html, body').animate({
                    scrollTop: $("#section-1").offset().top
                 }, 1000);
              }
            }
        })
        .state('contact', {
            url: '/contact',         
            onEnter: function() {
              if ($("#section-2").offset() != null) {
                 $('html, body').animate({
                    scrollTop: $("#section-2").offset().top
                 }, 1000);
              }
            }
        })

<div class="row" scroll-spy>
    <nav class="navbar navbar-default">
       <ul class="nav navbar-nav">
           <li spy="section-1"><a ui-sref="home">Home</a></li>
           <li spy="section-2"><a ui-sref="contact">Contact</a></li>
       </ul>
    </nav>
    .....
    <div class="row">
        <section id="section-1">
            <img src="/images/sg1.jpg" style="width:200; height:700"/>
        </section>
    </div>
    <div class="row">
        <ng-include src="'/partials/contact.html'"></ng-include>
    </div>
</div>

然后在index.html中：

$stateProvider
        .state('about', {
            url: '/about',          
            onEnter: function() {
              if ($("#section-1").offset() != null) {
                 $('html, body').animate({
                    scrollTop: $("#section-1").offset().top
                 }, 1000);
              }
            }
        })
        .state('contact', {
            url: '/contact',         
            onEnter: function() {
              if ($("#section-2").offset() != null) {
                 $('html, body').animate({
                    scrollTop: $("#section-2").offset().top
                 }, 1000);
              }
            }
        })

<div class="row" scroll-spy>
    <nav class="navbar navbar-default">
       <ul class="nav navbar-nav">
           <li spy="section-1"><a ui-sref="home">Home</a></li>
           <li spy="section-2"><a ui-sref="contact">Contact</a></li>
       </ul>
    </nav>
    .....
    <div class="row">
        <section id="section-1">
            <img src="/images/sg1.jpg" style="width:200; height:700"/>
        </section>
    </div>
    <div class="row">
        <ng-include src="'/partials/contact.html'"></ng-include>
    </div>
</div>

主页
联系

.....

在contact.html:

<section id="section-2">
    <div class="row">
        <img src="/images/sg2.jpg" style="width:200; height:700"/>
    </div>
</section>

当我输入url

'localhost:8080/about'

时，自动滚动就起作用了，但是对于

'localhost:8080/contact'

它不起作用。 问题似乎出在

ng include

上，因为当我将contact.html中的代码复制到index.html时没有问题。我做了一些调试，发现

$（“#section-2”）。当我使用
ng include
时，offset（）

在加载时为空。如果我点击

'Home'

，那么

'Contact'

滚动就可以了

---

如何解决

$（“section-2”）.offset（）在页面加载时计算为null的问题
 
$（“第2节”）
是无效的选择器。如果路由中不应该有jQuery，请使用指令。您假设元素存在，但它很可能不在
oneter
中。查看使用
$anchorScroll
dom无法看到锚点，因为它必须加载。ng include是通过http加载的，http有一些latency@charlietfl我不认为@user2891216在代码示例中实际使用了
$（“section-2”）.offset（）
supplied@charlietfl有一点很重要，那就是
onEnter
很可能太早就尝试滚动到某个元素。我遇到了类似的问题，必须等待ui路由器的
$viewContentReady
事件，然后才能尝试对元素执行操作。我尝试了
$viewContentLoaded
，并在我调用的函数中调用了
$state.go（'section-2'）
，但它仍然不起作用。还尝试了
angular.element（document）.ready（function（）{…}）
，但没有成功。就像@charlietfl、@Mwayi和@Tony所说的，ng include没有加载，所以转换不能发生。还有其他方法吗？