web-dev-qa-db-ja.com

Ng-clickを使ってルートを呼び出す方法とタイミング

ルートを使用しているとします。

// bootstrap
myApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {

    $routeProvider.when('/home', {
        templateUrl: 'partials/home.html',
        controller: 'HomeCtrl'
    });
    $routeProvider.when('/about', {
        templateUrl: 'partials/about.html',
        controller: 'AboutCtrl'
    });
...

そしてあなたのHTMLでは、ボタンがクリックされたときにaboutページに移動したいと思うでしょう。一つの方法は

<a href="#/about">

...でもここではng-clickが役に立つでしょう。

  1. その仮定は正しいですか？そのng-clickはアンカーの代わりに使われますか？
  2. もしそうなら、それはどのように動作しますか？ IE：

<div ng-click="/about">

angularjsroutesangularjs-routingangularjs-ng-clickangularjs-ng-route
243
Robert Christian

ルートは$locationサービスを監視し、URLの変更に応答します（通常はハッシュを通じて）。ルートを「有効にする」には、URLを変更するだけです。最も簡単な方法は、アンカータグを使用することです。

<a href="#/home">Go Home</a>
<a href="#/about">Go to About</a>

もっと複雑なものは何も必要ありません。ただし、コードからこれを実行する必要がある場合、正しい方法は$locationサービスを使用することです。

$scope.go = function ( path ) {
  $location.path( path );
};

これは、例えば、ボタンがトリガーする可能性があります：

<button ng-click="go('/home')"></button>
429
Josh David Miller

これは誰も言及していない素晴らしいヒントです。関数が含まれているコントローラーには、ロケーションプロバイダーを含める必要があります。

app.controller('SlideController', ['$scope', '$location',function($scope, $location){ 
$scope.goNext = function (hash) { 
$location.path(hash);
 }

;]);

 <!--the code to call it from within the partial:---> <div ng-click='goNext("/page2")'>next page</div>
81
sean

（ディレクティブで実装された）カスタム属性を使うことはおそらく最もきれいな方法です。これが私のバージョンです。@ Joshと@ seanの提案に基づいています。

angular.module('mymodule', [])

// Click to navigate
// similar to <a href="#/partial"> but hash is not required, 
// e.g. <div click-link="/partial">
.directive('clickLink', ['$location', function($location) {
    return {
        link: function(scope, element, attrs) {
            element.on('click', function() {
                scope.$apply(function() {
                    $location.path(attrs.clickLink);
                });
            });
        }
    }
}]);

便利な機能がいくつかありますが、私はAngularの新機能なので、おそらく改善の余地があります。

33
Bennett McElwee

ルーティングにng-clickを使用している場合は、要素を右クリックして[新しいタブで開く]または[Ctrl]キーを押しながらリンクをクリックすることはできません。ナビゲーションに来るとき私はng-hrefを使用しようとします。 ng-clickは操作や折りたたみのような視覚効果のためのボタンに使うのが良いです。しかし、私はお勧めしません。あなたがルートを変更するならば、あなたはアプリケーションの多くの場所で変更する必要があるかもしれません。リンクを返すメソッドがあります。 ex：についてあなたがユーティリティに置くこの方法

4
Jens Alenius

別の解決策ですがng-clickを使わずに<a>以外のタグでも動作します：

<tr [routerLink]="['/about']">

こうすればあなたのルートにパラメータを渡すこともできます： https://stackoverflow.com/a/40045556/838494

（これは角度のある私の最初の日です。穏やかなフィードバックは大歓迎です）

1
Albert Hendriks

ng-clickディレクティブを使用して、ルートtemplateUrlを要求しながら関数を呼び出し、どの<div>をshowまたはhideにするかを決定しましたルートのtemplateUrlページ内またはさまざまなシナリオ用。

AngularJS 1.6.9

例を見てみましょう。ルーティングページで、追加<div>または編集<div>が必要です。これらは、親コントローラーモデル$scope.addProductおよび$scope.editProductブール値を使用して制御します。

RoutingTesting.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Testing</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-route.min.js"></script>
    <script>
        var app = angular.module("MyApp", ["ngRoute"]);

        app.config(function($routeProvider){
            $routeProvider
                .when("/TestingPage", {
                    templateUrl: "TestingPage.html"
                });
        });

        app.controller("HomeController", function($scope, $location){

            $scope.init = function(){
                $scope.addProduct = false;
                $scope.editProduct = false;
            }

            $scope.productOperation = function(operationType, productId){
                $scope.addProduct = false;
                $scope.editProduct = false;

                if(operationType === "add"){
                    $scope.addProduct = true;
                    console.log("Add productOperation requested...");
                }else if(operationType === "edit"){
                    $scope.editProduct = true;
                    console.log("Edit productOperation requested : " + productId);
                }

                //*************** VERY IMPORTANT NOTE ***************
                //comment this $location.path("..."); line, when using <a> anchor tags,
                //only useful when <a> below given are commented, and using <input> controls
                $location.path("TestingPage");
            };

        });
    </script>
</head>
<body ng-app="MyApp" ng-controller="HomeController">

    <div ng-init="init()">

        <!-- Either use <a>anchor tag or input type=button -->

        <!--<a href="#!TestingPage" ng-click="productOperation('add', -1)">Add Product</a>-->
        <!--<br><br>-->
        <!--<a href="#!TestingPage" ng-click="productOperation('edit', 10)">Edit Product</a>-->

        <input type="button" ng-click="productOperation('add', -1)" value="Add Product"/>
        <br><br>
        <input type="button" ng-click="productOperation('edit', 10)" value="Edit Product"/>
        <pre>addProduct : {{addProduct}}</pre>
        <pre>editProduct : {{editProduct}}</pre>
        <ng-view></ng-view>

    </div>

</body>
</html>

TestingPage.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .productOperation{
            position:fixed;
            top: 50%;
            left: 50%;
            width:30em;
            height:18em;
            margin-left: -15em; /*set to a negative number 1/2 of your width*/
            margin-top: -9em; /*set to a negative number 1/2 of your height*/
            border: 1px solid #ccc;
            background: yellow;
        }
    </style>
</head>
<body>

<div class="productOperation" >

    <div ng-show="addProduct">
        <h2 >Add Product enabled</h2>
    </div>

    <div ng-show="editProduct">
        <h2>Edit Product enabled</h2>
    </div>

</div>

</body>
</html>

両方のページ-RoutingTesting.html（親）、TestingPage.html（ルーティングページ）は同じディレクトリにあり、

これが誰かを助けることを願っています。

1
ArifMustafa

あなたが使用することができます：

<a ng-href="#/about">About</a>

href の中に何らかの動的変数が欲しいなら、このようにすることができます：

<a ng-href="{{link + 123}}">Link to 123</a>

link はAngularスコープ変数です。

0
Sohail xIN3N

あなたのhtml書き込みで以下のようにそれをしてください：

<button ng-click="going()">goto</button>

そしてあなたのコントローラで、次のように$ stateを追加します。

.controller('homeCTRL', function($scope, **$state**) {

$scope.going = function(){

$state.go('your route');

}

})
0
LucasMugi