ui-sref를 사용하여 버튼 태그에서 상태 트리거
어떤 우아한 방법으로 상태를 촉발할 수 있을까요?angular-ui-router클릭해서<button>?
사용하고 있다ui-sref="main"또, 이 동작은 동작하지 않는 것 같습니다만,<a>그래도.
HTML:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.13/angular.js" data-semver="1.2.13"></script>
<script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js" ></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<ul class="nav navbar-nav navbar-left">
<li>
<button class="btn btn-danger navbar-btn" ui-sref="main" >Button Submit</button>
</li>
<li>
<a class="btn btn-danger navbar-btn" ui-sref="main" >Anchor Link Submit</a>
</li>
</ul>
</nav>
</body>
</html>
Javascript:
var app = angular.module('plunker', ['ui.router']);
'use strict';
app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state("main", {
url: "/main",
resolve: {
test: function() {
alert("Triggered main state");
return true;
}
}
});
}]);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
링크: http://plnkr.co/edit/vMtLN0ncpqAfgM6S1Ng4?p=preview
버튼을 앵커에 감으면 바로 사용할 수 있습니다.
<a ui-sref="main">
<button class="btn btn-danger navbar-btn" >Button Submit</button>
</a>
데모
다른 솔루션들은 제게 효과가 없었습니다.ui-router를 사용하여 한 작업은 다음과 같습니다.
<button ui-sref="app.schedule" class="btn btn-danger navbar-btn">
Schedule
</button>
파이 조각 :-)
angular-ui-bootstrap 제어 가이드라인에 제시된 바와 같이 버튼과 함께 사용하는 것이 더 좋은 방법이라고 생각되므로 plnkr 코드를 구현하였습니다.버튼 클릭만으로 조작할 수 있도록 시험해 보았습니다만, 버튼 클릭만으로 ui-sref가 간단하게 동작하기 때문에 ng-click을 쓸 필요는 없습니다.한번 봐주세요.
접근성 컴플라이언스를 위해 이 솔루션을 구현하고 앵커 태그의 스타일을 유지하고 원하는 메뉴 키보드 기능을 구현합니다(위 화살표 키와 아래 화살표 키는 목록 항목에서 포커스를 이동하고 Enter 키를 누르면 포커스 링크가 활성화됩니다).
<ul class="dropdown-menu white" role="menu">
<li role="menuitem">
<a href="#" ng-click="go('main')">
<i class="glyphicon glyphicon-log-out"></i> Sign Out
</a>
</li>
</ul>
Go 기능은 UI 라우터 상태 서비스 주변의 전면/래퍼로 상태를 탐색합니다.
$scope.go = function (page) {
$state.go(page);
};
저도 네비게이션 바를 사용하고 있기 때문에 버튼을 사용할 필요가 없습니다.이거 있어요.
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li ng-class="{ active: $state.includes('mystate1') }"><a ui-sref='mystate1'>mystate1</a></li>
<li ng-class="{ active: $state.includes('mystate2') }"><a ui-sref='mystate2'>mystate2</a></li>
<li ng-class="{ active: $state.includes('mystate3') }"><a ui-sref='mystate3'>mystate3</a></li>
<li ng-class="{ active: $state.includes('mystate4') }"><a ui-sref='mystate4'>mystate4</a></li>
</ul>
</div>
Main은 자 뷰가 아닙니다.또한 이 뷰에 대한 URL을 정의했으므로 대신 다음 URL을 사용해 보십시오.
<a href="/main">
<button class="btn btn-danger navbar-btn" >Button Submit</button>
</a>
이 경우, 다른 페이지로 연결되는 버튼을 원하시리라 생각합니다.
단, ui-view를 사용하는 더 좋은 방법은 부모 뷰와 자녀 뷰를 작성하는 것입니다.https://github.com/angular-ui/ui-router/wiki#state-change-events 를 참조해 주세요.
이걸 써보고 효과가 있는지 보세요.내가 한 일은 활자로 된 div를 만든 것뿐이다.button
<div ui-sref="main" type="button" >Go To Main State</div>
언급URL : https://stackoverflow.com/questions/22124663/trigger-state-in-button-tag-using-ui-sref
'programing' 카테고리의 다른 글
| 플럭스+리액트 vs 백본+ 반응 (0) | 2023.03.31 |
|---|---|
| javax.json을 이클립스로 Import하려면 어떻게 해야 하나요? (0) | 2023.03.31 |
| 부트스트랩3 - AJAX를 통해 모달바디에 콘텐츠를 로드하는 방법 (0) | 2023.03.31 |
| CRUDRepository에서 업데이트 또는 저장 업데이트 (0) | 2023.03.31 |
| Robo 3T를 사용하여 MongoDB에서 JSON을 내보내는 방법 (0) | 2023.03.31 |