angularjs UI-ルータアニメーションスクロール

Question

を固定するために、私はちょうど私がこのように私のリンクを設定することで、UI-ルータを使用してポイントを固定するナビゲートできることを見出した：

<ul> 
    <li><a ui-sref="home({ '#': 'creative' })">creative</a></li> 
    <li><a ui-sref="home({ '#': 'work' })">work</a></li> 
    <li><a ui-sref="home({ '#': 'contact' })">contact</a></li> 
</ul> 

これは素晴らしいですが、私はしたいと思いますアンカー位置にアニメートします。私は状態イベントのいずれかを使用することができます考え出したので、私はこの試みた：

$transitions.onFinish({ to: true }, function() { 

    console.log('the state has changed'); 

    console.log($location.hash()); 
    var hash = $location.hash(); 

    if (hash) { 
     var target = document.querySelector('#' + hash); 

     console.log(target); 

     var element = angular.element(target); 

     console.log(element); 

     $document.scrollToElement(element, 0, 2000); 
    } else { 

     // Scroll to the top of the page 
     document.body.scrollTop = document.documentElement.scrollTop = 0; 
    } 
}); 

をしかし、ビューはまだロードされていないので、要素を見つけることがどこにもありません。 私のscrollToをアニメーション化する方法があれば？

Answer 1

主なアイデアは、このアニメーションを適切なタイミングで追加することです。適切な瞬間は、あなたのビューが読み込まれ、コンパイルされるときです。ビューが読み込まれてコンパイルされることを100％確実にするにはどうすればよいですか？ビューにディレクティブを追加してください！

ビューが準備完了になると、ディレクティブが初期化され、アニメーションをエレメントにバインドできます。それだ。

Answer 2

Vitaliiは正しかった、指示を作成する方法があった。 私は単純に、このやった：

angular.module('directives').directive('autoscroll', directive); 

function directive($document, $location) { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
      var offset = attrs.offset || 0; 
      var duration = attrs.duration || 2000;    

      scope.$watch(function() { 
       return $location.hash(); 
      }, function (hash) { 
       if (hash) { 
        var anchor = document.querySelector('#' + hash); 
        var target = angular.element(anchor); 
        $document.scrollToElement(target, offset, duration); 
       } else { 
        // Scroll to the top of the page if no hash has been supplied 
        document.body.scrollTop = document.documentElement.scrollTop = 0; 
       } 
      }); 
     } 

    }; 
}; 

をそして実際のビュー・テンプレート・ファイルでこれを使用する（ターゲットIDを持つ）、それが働きました。