-
Angularjs 2015‧02‧24
Angularjs – 컨트롤러 밖에서 컨트롤러 안의 함수 실행
대부분은 아래와 같이 함수를 호출하게 된다. <div id="testDiv" ng-app='MyModule' ng-controller="MyController"> <a href="#" ng-click="callAlert('click-A')">클릭 A</a> </div> 클릭 A 라는 글자를 클릭하게 되면 스크립트 파일에서 controller 안의 함수를 호출한다. angular.module('MyModule', []) .controller('MyController', function ($scope) { $scope.callAlert = function (data) { alert(data); }; }); 값을 받은 callAlert 함수는 알럿창으로 click-A라고 출력하게 된다. 여기까지는 가장 일반적인 스코프안의 함수 실행이다. 그러나 […]
-
Angularjs 2015‧02‧24
Angularjs – 지정 엘리먼트 안에 자기만의 함수 호출을 가진 새로운 엘리먼트 생성하기
새로운 엘리먼트를 생성하는 방법은 아래 코드와 같다. function(s, e, a) { var newElement = angular.element(' <div></div> '); e.append(newElement); $compile(newElement)(s); } 여기에 새로 생성되는 엘리먼트에 컨트롤러더 달아주고, ng-click과 같은 기능도 추가해서 만들어 보려고 한다. 일단 html을 아래와 같이 만든다. <div ng-app="AngApp"> <div ng-controller="MainCtrl"> Hello {{name}}! <my-directive></my-directive> </div> </div> 이제 my-directive 엘리먼트 안에 새로운 엘리먼트를 만들고 함수 호출도 […]
-
Javascript, jQuery 2015‧02‧23
모바일웹에서 기상청 날씨(실황) api 가져와서 파싱해서 노출까지 자바스크립트로 만들기
<포스팅 업데이트 : 2017년 4월 11일> 다시한번 해당 내용으로 data.go.kr 문의를 보냈습니다. 원문은 https://www.data.go.kr/information/QNA_0000000000014129/qna.do 이 곳을 참고해보시면 됩니다. 결론부터 말씀드리자면 api를 제공하는 입장에서 크로스도메인은 보안상의 이유로 허용할 수 없다고 합니다. 라이브러리가 안되는건 다른 라이브러리를 사용해서든 크로스도메인을 스스로 알아서 해결하여 사용하라는 이야기입니다. 참고로 전 다른 라이브러리들을 이용해서 시도해 보았으나 이 원리가 yahoo api를 거쳐 다녀오는 형태의 라이브러리들인데 […]
-
Javascript, jQuery 2015‧02‧13
jQuery - parseJSON에서 Uncaught SyntaxError: Unexpected token 오류날 때
이 것때문에 참 많이 고생했다. 혹시나 불러온 데이터의 형식이 문제인지 아니면 ajax로 불러올 때 설정을 잘못한건지 답을 찾기가 힘들었다. 그러던 중 조금씩 답이 보이기 시작했는데 바로 ajax로 불러온 데이터안에 구조중 빈공간이지만 내려쓰기 한 것이 있기 때문이였다. 즉 한줄로 써야하는 데이터를 html dom 구조로 보기좋게 만들다보니 이런 오류가 발생하는 것이였다. 대표적으로 대한민국 기상청 api 였다. ㅠㅠ […]
-
Javascript, jQuery 2015‧02‧13
JS - 현재 날짜 가져오기
현재 날짜를 년월일로 가져오는 방법은 아래와 같다. var today = new Date(); var dd = today.getDate(); var mm = today.getMonth()+1; //January is 0! var yyyy = today.getFullYear(); if(dd<10) { dd='0'+dd } if(mm<10) { mm='0'+mm } today = yyyy+'/' + mm+'/'+dd; 추가로 댓글로 나그네님께서 제공해주신 코드입니다. 좀더 간결하고 편하네요. var st_date = new Date().toISOString().substr(0, 10).replace('T', ' […]
-
Javascript, jQuery 2015‧02‧12
jQuery 플러그인 - 크로스 도메인 ajax로 가져오기
외부에서 파일을 가져올 때 도메인이 다르면 보안 정책에 의해서 파일이 불러와지지 않는다. 이를 도와주는 플러그인이 있다. Cross-domain requests with jQuery 소개 및 다운로드 주소는 http://james.padolsey.com/javascript/cross-domain-requests-with-jquery/ 이다. 사용 방법은 간단하다. 일반적으로 ajax 호출하는 것은 그대로 사용하고 head안에 플러그인을 불러오기만 하면 된다. <script type="text/javascript" src="./js/jquery.xdomainajax.js"></script>
-
Angularjs 2015‧02‧12
Angularjs - 외부 json 파일 불러와서 dom에 바인딩 시키기
코드 출처 : http://codepen.io/tutorialab/pen/EJAet?editors=101 <div id="wrapper" ng-app> <div ng-controller="DataCtrl"> <pre ng-model="data"> {{data}} </pre> <input ng-model='name' /> {{name}} <input ng-model='salutation' /> {{salutation}} <input ng-model='greeting' /> {{greeting}} </div> </div> 위 처럼 html 을 만든다. angular.module('', []); function DataCtrl($scope, $http) { $http.jsonp("http://angularjs.org/greet.php?callback=JSON_CALLBACK&name=Super%20Hero"). success(function(data) { $scope.data = data; $scope.name = data.name; $scope.salutation = data.salutation; $scope.greeting = data.greeting; }). error(function (data) […]
-
Angularjs 2015‧02‧12
Angularjs - jsonp 불러오기
외부에 있는 json 파일을 불러오는 코드이다. 출처 : http://jsfiddle.net/zkfruxu3/ <div ng-app ng-controller="jsonp_example"> <button ng-click="doRequest()">Make JSONP request</button> </div> 위 처럼 html 안에 버튼을 클릭하면 doRequest 함수가 실행되게 만든다. function jsonp_example($scope, $http) { $scope.doRequest = function() { var url = "http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts?callback=JSON_CALLBACK"; $http.jsonp(url) .success(function(data){ console.log(data.found); }); }; var url = "http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts?callback=JSON_CALLBACK"; $http.jsonp(url) .success(function(data){ console.log(data.found); }); } 외부 파일을 $http.jsonp을 통해 […]
-
Javascript, jQuery, Tools 2015‧01‧26
Javascript - 모바일 브라우저 접속 체크
모바일 기기로 접속하였는지 여부를 확인한 후 개별적으로 링크를 따로 구현하게 될 때가 많다. 특히 모바일웹을 따로 구축하게 되는 경우가 이러한데 모바일이 시대가 흐를수록 다양해지다보니 오래전 스크립트가 제대로 작동되지 않을 때가 있다. 이를 해소해주는 사이트가 있다. http://detectmobilebrowsers.com/ 위 사이트로 이동한 뒤 javascript 파일을 다운 받아 사용하여도 된다. jQuery등 그 외 Apache, ASP, ASP.NET, ColdFusion, C#, IIS, JSP, […]