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이 도움이 될 것 같습니다.
- 그 추정이 맞습니까?앵커 대신 NG클릭을 사용하시겠습니까?
- 그렇다면 어떻게 작동할까요?IE:
<div ng-click="/about">
루트는 를 감시합니다.$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>
여기 아무도 언급하지 않은 좋은 팁이 있다.함수가 속해 있는 컨트롤러에는 로케이션 공급자를 포함해야 합니다.
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>
커스텀 어트리뷰트(디렉티브로 실장)를 사용하는 것이 아마도 가장 깨끗한 방법일 것입니다.@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는 처음이라 개선의 여지가 있을지도 모릅니다.
라우팅에 ng-click을 사용하는 경우 요소를 마우스 오른쪽 버튼으로 클릭하고 '새로운 탭에서 열기'를 선택하거나 링크를 클릭할 수 없습니다.내비게이션에서는 ng-href를 사용하려고 합니다.ng-click은 조작이나 축소 등의 시각효과에 사용하는 것이 좋습니다.하지만 About은 추천하지 않습니다.루트를 변경할 경우 어플리케이션에 배치되어 있는 많은 부분을 변경해야 할 수 있습니다.링크를 반환하는 메서드가 있습니다.예: 개요.유틸리티에 배치하는 이 메서드
루트 templateUrl을 요구하면서 함수를 호출하기 위해 디렉티브를 사용했습니다.<div>그래야만 한다.show또는hideinside route templateUrl 페이지 또는 다른 시나리오의 경우.
AngularJS 1.6.9
예를 들어 라우팅 페이지에서 add가 필요한 경우<div>또는 편집<div>부모 컨트롤러 모델을 사용하여 제어하고 있습니다.$scope.addProduct그리고.$scope.editProduct부울
Routing Testing.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(커넥터 페이지)는 같은 디렉토리에 있습니다.
이게 누군가에게 도움이 되길 바랍니다.
ng-click을 사용하지 않고 다른 태그에서도 사용할 수 있는 다른 솔루션<a>:
<tr [routerLink]="['/about']">
이 방법으로 https://stackoverflow.com/a/40045556/838494 에 파라미터를 전달할 수도 있습니다.
(오늘은 앵귤러에 걸린 첫 번째 날입니다.친절한 피드백은 환영입니다.)
다음을 사용할 수 있습니다.
<a ng-href="#/about">About</a>
href 내에 다이내믹 변수를 사용하는 경우 다음과 같이 할 수 있습니다.
<a ng-href="{{link + 123}}">Link to 123</a>
여기서 link는 Angular scope 변수입니다.
html에 다음과 같이 적어주세요.
<button ng-click="going()">goto</button>
컨트롤러에서 다음과 같이 $state를 추가합니다.
.controller('homeCTRL', function($scope, **$state**) {
$scope.going = function(){
$state.go('your route');
}
})
언급URL : https://stackoverflow.com/questions/14201753/how-when-to-use-ng-click-to-call-a-route
'programing' 카테고리의 다른 글
| '1985-02-07' 변환 방법T00:00:00.000Z" (ISO8601)를 Oracle 날짜 값으로 변경하시겠습니까? (0) | 2023.04.01 |
|---|---|
| C#과 JSON의 시리얼화 해제 (0) | 2023.04.01 |
| Oracle의 기능과 프로시저 비교 (0) | 2023.03.27 |
| 워드프레스에 Ajax를 사용하여 JSON 데이터 반환 (0) | 2023.03.27 |
| Angular ui-router - 상위 템플릿에서 전달된 중첩된 명명된 뷰의 매개 변수에 액세스하는 방법 (0) | 2023.03.27 |