191

戻るボタンのあるサイトヘッダーであるディレクティブがあり、クリックして前のページに戻りたいです。どうすれば角度を付けてそれを行うことができますか？

私が試してみました：

<header class="title">
<a class="back" ng-class="icons"><img src="../media/icons/right_circular.png" ng-click="history.back()" /></a>
<h1>{{title}}</h1>
<a href="/home" class="home" ng-class="icons"><img src="../media/icons/53-house.png" /></a>   
</header>

これはディレクティブjsです：

myApp.directive('siteHeader', function () {
    return {
        restrict: 'E',
        templateUrl: 'partials/siteHeader.html',
        scope: {
            title: '@title',
            icons: '@icons'
        }
    };
});

しかし、何も起こりません。$locationについてangular.jsAPIを調べましたが、戻るボタンまたはについては何も見つかりませんでしたhistory.back()。

4

10 に答える 10

263

ディレクティブでリンク関数を使用する必要があります。

link: function(scope, element, attrs) {
     element.on('click', function() {
         $window.history.back();
     });
 }

jsFiddleを参照してください。

于 2012-12-28T13:52:20.447 に答える
135

Angular ルートはブラウザーの位置を監視するため、window.history.back()何かをクリックするだけで機能します。

HTML:

<div class="nav-header" ng-click="doTheBack()">Reverse!</div>

JS:

$scope.doTheBack = function() {
  window.history.back();
};

私は通常、アプリ コントローラーで「$back」というグローバル関数を作成し、通常はこれを body タグに付けます。

angular.module('myApp').controller('AppCtrl', ['$scope', function($scope) {
  $scope.$back = function() { 
    window.history.back();
  };
}]);

次に、アプリのどこでもできる<a ng-click="$back()">Back</a>

(よりテストしやすくしたい場合は、$window サービスをコントローラーに挿入して使用します$window.history.back())。

于 2012-12-28T13:45:01.027 に答える
20

もう 1 つの優れた再利用可能な解決策は、次のようなディレクティブを作成することです。

app.directive( 'backButton', function() {
    return {
        restrict: 'A',
        link: function( scope, element, attrs ) {
            element.on( 'click', function () {
                history.back();
                scope.$apply();
            } );
        }
    };
} );

次に、次のように使用します。

<a href back-button>back</a>
于 2013-12-17T10:27:06.123 に答える
18

役に立つ場合に備えて...「$digest() の反復が 10 回に達しました。中止します!」というメッセージが表示されました。$window.history.back(); 使用時のエラー IE9 を使用します (もちろん、他のブラウザーでも問題なく動作します)。

私はそれを使用して動作させました：

setTimeout(function() {
  $window.history.back();
},100);
于 2013-02-21T01:07:55.403 に答える
1

構文エラーがありました。これを試してみてください。うまくいくはずです：

directives.directive('backButton', function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('click', function () {
                history.back();
                scope.$apply();
            });
        }
    }
});
于 2015-01-12T16:55:41.343 に答える
0

私にとっての問題は、ナビゲートしてから別の状態に遷移する必要があることでした。何らかの理由で history.back() が発生する前に遷移が発生したため、使用$window.history.back()が機能しなかったため、タイムアウト関数で遷移をラップする必要がありました。

$window.history.back();
setTimeout(function() {
  $state.transitionTo("tab.jobs"); }, 100);

これで問題が解決しました。

于 2015-02-19T06:01:07.693 に答える