ng-click을 사용하여 경로를 호출하는 방법 / 언제?

243

경로를 사용한다고 가정하십시오.

// 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에서 버튼을 클릭하면 정보 페이지로 이동하려고합니다. 한 가지 방법은

<a href="#/about">

...하지만 ng-click이 여기에서도 유용 할 것 같습니다.

  1. 그 가정이 맞습니까? 앵커 대신 ng-click을 사용 하시겠습니까?
  2. 그렇다면 어떻게 작동합니까? IE :

<div ng-click="/about">

angularjs  routes  angularjs-routing  angularjs-ng-click  angularjs-ng-route 
— 로버트 크리스천
소스
— Blazemonger
ui-sref이 답변보기 : stackoverflow.com/a/21105057/2539811
— Vincil Bishop

답변:

430

경로는 $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>
— 조쉬 데이비드 밀러
소스
6
이것은 나를 위해 작동하지 않았지만 $ location.hash (hash); $ location.path (hash); 효과가있다. 이것은 @sean에 의해 다른 답변으로 제안되며 어떤 이유로 투표가 훨씬 적습니다.
— 퀘스트 당 Aronsson
2
@PerQuestedAronsson path및 hash두 가지 목적을 이룰 그러나 상황에 따라서는 같은 효과를 가질 수있다. 대부분의 경우 엄격한 라우팅 (특히 html5mode활성화 된 경우)의 path경우 정식 선택입니다. 이것을 반영하여 답변을 업데이트했습니다.
— 조쉬 데이비드 밀러
2
@DavidWoods 기본 경로와 일치하는 경우에만 작동합니다 /. 에서 앱을 제공하는 경우 /app/index.html절대 URL이이므로 작동하지 않습니다 /app/next.html. 또한 서버는에 index.html맞을 때 파일 을 반환하도록 설정되어 있어야합니다 /next.html. 내가보고 싶다면 Plunker / Fiddle을 자유롭게 게시하십시오.
— Josh David Miller
2
이것은 매우 일반적이고 유용한 일입니다. 중앙 집중화 할 수있는 go방법이 있습니까? 아니면 모든 컨트롤러에 메소드를 추가해야 합니까? (아니면와 루트 컨트롤러를 만드는 go방법?)
— 베넷 McElwee에게
3
@BennettMcElwee 지금까지 가장 좋은 방법은 앵커 태그를 사용하는 것입니다. 이 경우 버튼 태그는 값을 제공하지 않으며 문제를 일으키는 것입니다. 즉,이를 위해 지시문을 쉽게 작성할 수 있습니다 (예 :) <button click-go="/home">Click</button>. 링크 기능은 다음과 같습니다.element.on("click", function () { $location.path(attrs.clickGo); });
— Josh David Miller
83

아무도 언급하지 않은 훌륭한 팁이 있습니다. 함수가있는 컨트롤러에서 위치 제공자를 포함해야합니다.

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>
— 숀
소스
2
멋진 감사합니다! 이 답변은 해시 메소드가 url (인코딩 된)의 값을 추가하고 경로 메소드가 전체 URL을 대체 할 수 있기 때문에 더 효과적이었습니다. 감사!
— jfplataroti
8
이것이 실제로이 페이지에서 제안 된 유일한 솔루션입니다. 왜 다른 답변이이 투표보다 많은 투표를했는지 모르십니까?
— 퀘스트 당 Aronsson
나는 이것을 시도했지만 작동하지 않습니다. 컨트롤러에 연결하기 전에 모듈에 위치를 추가해야합니까?
— Fallenreaper
<a> 대신 div를 ng-click로 설정하면 나에게 도움이되었습니다.
— Steve
33

지시문으로 구현 된 사용자 정의 속성을 사용하는 것이 가장 깨끗한 방법 일 것입니다. @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를 처음 사용하므로 개선의 여지가 있습니다.

— 베넷 맥 엘위
소스
clickLink 속성이 변경 될 때마다 요소에 click 이벤트가 생성되지 않습니까?
— toxaq
@toxaq 확실히 완벽하지는 않습니다. 나는 때 의심 clickLink속성이 변경 지시어는 새로운 클릭 처리기를 추가하지만 장소의 이전을 떠날 것이다. 결과는 약간 혼란 스러울 수 있습니다. 나는 원래 clickLink속성이 변하지 않는 상황에서 사용하기 위해 이것을 썼기 때문에 나는 결코이 느슨한 끝을 묶지 않았다. 이 버그를 수정하면 실제로 코드가 더 단순해질 것이라고 생각합니다. 시간이 있으면 할 수 있습니다 (ha!)
— 베넷 McElwee에게
멋있는. 예, attrs. $ observe를 꺼내면 의도 한대로 작동합니다. 여기에 내 버전을 붙여 넣었지만 주석에는 형식이 지정되지 않으며 관찰 부분과 거의 동일합니다.
— toxaq
@toxaq 지금 코드를 편집했습니다. 다른 지시문의 코드를 수정했다고 생각 attrs.$observe합니다. 그래서 부적절한 내용 이있었습니다. 제안 해 주셔서 감사합니다.
— Bennett McElwee
제안 된 답변을 읽을 때 이것을 제안하려고했습니다. 깨끗하고 재사용이 가능합니다. +1
— Dormouse
4

라우팅에 ng-click을 사용하면 요소를 마우스 오른쪽 버튼으로 클릭하고 '새 탭에서 열기'를 선택하거나 링크를 클릭하여 ctrl을 선택할 수 없습니다. 탐색 할 때 ng-href를 사용하려고합니다. ng-click은 축소 또는 축소와 같은 시각 효과 나 조작에 단추를 사용하는 것이 좋습니다. 그러나 나는 추천하지 않습니다. 경로를 변경하면 응용 프로그램에 배치 된 경로를 많이 변경해야 할 수도 있습니다. 링크를 돌려주는 메소드가 있습니다. 예 : 정보. 유틸리티에 배치하는이 방법

— 젠스 알레 니 우스
소스
1

내가 사용 ng-click하는 결정, 경로 templateUrl를 요청하면서, 함수를 호출하는 지시어 <div>수있다 show또는 hide내부 경로 templateUrl 페이지 또는 다른 시나리오를.

AngularJS 1.6.9

라우팅 페이지 에서 부모 컨트롤러 모델 과 부울을 사용하여 제어 하는 add <div>또는 edit 가 필요합니다 .<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

ng-click을 사용하지 않는 다른 솔루션이지만 다음과 같은 다른 태그에서도 여전히 작동합니다 <a>.

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

이 방법으로 경로에 매개 변수를 전달할 수도 있습니다 : https://stackoverflow.com/a/40045556/838494

(이것은 각도가있는 첫날입니다. 부드러운 피드백을 환영합니다)

— 앨버트 헨드릭스
소스
0

당신이 사용할 수있는:

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

href 내부에 동적 변수를 원하면 다음과 같이 할 수 있습니다.

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

여기서 링크 는 각도 범위 변수입니다.

— 소하 일 xIN3N
소스
5
이것은 ng-click위치 변경 에 사용하는 OP 질문에 대한 답변이 아닙니다 .
— jjmontes
0

html 쓰기에서 다음과 같이하십시오.

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

그리고 컨트롤러에서 다음과 같이 $ state를 추가하십시오 : 

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

$scope.going = function(){

$state.go('your route');

}

})
— 루카스
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.