Knowledge Map

URL막기 / 단체 체크, 체그 해제 본문

WEB/AngularJS

URL막기 / 단체 체크, 체그 해제

2016. 3. 29. 15:58

URL 막기.

AngularJS에서 URL과 HTML파일의 맵핑은 하기 나름이기는 하지만 app.js에서 주로 한다. 

$routeProvider를 이용해서 templateUrl, controller를 잡는다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
angular
    .module('testApp', [
        'ngAnimate',
                'ngCookies',
                'ngResource',
                'ngRoute',
                'ngSanitize',
    ])
    .config(function ($routeProvider, $translateProvider) {
        $routeProvider
            .when('/intro', {
                templateUrl: 'view/intro.html',
                controller: 'IntroCtrl'
            })
            .when('/intro/how', {
                templateUrl: 'view/how.html',
                controller: 'HowCtrl'
             })
cs


전체 소스는 너무 길기 때문에 거의다 잘라버리고 편집했다. 그대로 하면 못쓴다.


여기서 안 들어간 것들은 

1
2
3
.otherwise({
    redirectTo: '/intro'
});
cs


이런식으로 전부다 리다이렉트를 시켜 버린다.


회원 가입일때 절차를 띄어넘어서 url로 접근해서 가입을 시도하려고 할 경우 약관 등을 반드시 거치게 만들 필요가 있다.

이럴때에는 원래 존재하는 url이기 때문에 위와 같은 방법으로는 막을수가 없다.


1
2
3
4
if(S.a != true ){
    $location.path('/as/p');
    alert('모든 약관에 동의하셔야 회원가입이 가능합니다.');
}
cs

해당 화면을 담당하는 컨트롤러의 최상단에다가 이런식으로 함수 없이 바로 if문을 주었다.

이렇게 할경우 컨트롤러가 로딩되는 순간 제일 먼저 위의 구문이 작동하게 된다.


여기서 s.a는 공용으로 공유하는 값을 저장하는 것들중 하나이다.

이전의 체크를 다하면 해당 컨트롤러에서 인증 값을 보내고 그걸 받아서 

페이지가 넘어갈때 참고를 하게 되는 것이다. 그리고 그 참고하는 값을 못받으면 true가 되지 않아서 

자동으로 이전페이지로 이동하게 된다.

==================================================================================

체크해제, 전체 체크,개별체크로 다 체크했을때 자동으로 전체체크란도 체크되게 구현.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$scope.a = {
     1: {field: "1", value: null},
    2: {field: "2", value: null},
     a:{field:"a", value:null}
     /* totalAgreement: {field:"totalAgreement", value:null}*/
};
 
$scope.ad = function(){
     if($scope.a.a.value == true){
        $scope.a.1.value = true;
         $scope.a.2.value = true;
    }
      if($scope.a.a.value == false){
        $scope.a.1.value = false;
         $scope.a.2.value = false;
    }
};
 
$scope.ag1 = function(){
    if($scope.ag.1.value == true && $scope.a.2.value == true){
        $scope.ㅁ.a.value = true
     }else{
         $scope.a.a.value = false
     }
};
cs


일종의 자바스크립트 방식으로 구현했다. 더 쉬운 방식도 있는데 ng-check에 해당 모델 값을 연결 시키면 된다.

이것도 조금 이상하게 짠거다만..


'WEB > AngularJS' 카테고리의 다른 글

angularjs 윤년 처리  (0) 2016.04.01
angularJS에서 버튼 생성  (0) 2016.03.31
placeholder 에 angularjs translate적용하기  (0) 2016.03.31
  (0) 2016.03.21
AngularJS 셋팅  (0) 2016.02.22
Comments