Programming is my life~! : March 2014

Friday, March 28, 2014

Call Parent Controller Function from Child Controller

in Nested Div you can call child function to call parent

this structure is a kind of java extend

<body ng-controller="MainCtrl">
<div ng-controller="ChildCtrl">

<p>Hello {{firstName}} {{surname}}!</p>
<p>Meaning of Life is {{addOne(41)}}.</p>
<p ng-click='callP()'>Studies have shown {{multiplyByOneHundred(6/10)}}% of beginners are confused about inheritance.</p>
</div>
</body>

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
$scope.firstName = 'Harvey';
$scope.addOne = function(number){
return number + 1;
}
$scope.show = function(number){
alert('show2');
}
});

app.controller('ChildCtrl', function($scope) {
$scope.surname = 'Man..fren..gen..sen';
$scope.multiplyByOneHundred = function(number){
return number * 100;
}
$scope.callP = function(){
$scope.$parent.show();
}
$scope.show = function(number){
alert('show1');
}
});

ng-include dynamic change view and controllers

this story is a sample
when you want change view and controllers

this is a good example

<!DOCTYPE html>
<html>

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script data-require="angular.js@1.0.7" data-semver="1.0.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<style type="text/css" media="all">
.controller-a {background-color: yellow;}
.controller-b-style {background-color: lightgrey;}
</style>
</head>

<body data-ng-app="webApp">
<h1>Hello Plunker!</h1>
<div class="controller-a" ng-controller="ControllerA">
Controller A
<div>
<button ng-click="cntPlusPlus()">cnt++</button> CNT: {{cnt}}
</div>
<button ng-click="addB()">Add B</button>
<div ng-repeat="B in Bs">
<div ng-include="B.name"></div>
</div>
</div>
<script type="text/ng-template" id="b-template">

<div ng-controller="ControllerB">this is controller b: <button ng-click="cntPlusPlus()">cnt++</button></div>
</script>
<script>
var webApp = angular.module("webApp",[]);

webApp.controller("ControllerA", function($scope){
$scope.cnt = 0;
$scope.cntPlusPlus = function(){
$scope.cnt++;
};

$scope.Bs = [];
$scope.addB = function(){
$scope.Bs.push({name:'b-template'});
};
});

webApp.controller("ControllerB", function($scope){
$scope.cntPlusPlus = function(){
console.log("overwrite plus plus");
// $scope.$parent.$parent.$parent.cnt++; //should be moved to service
alert('요소');
}
});
</script>
</body>
</html>

Thursday, March 27, 2014

dragstart event summary

I know this is a little bit difficult to explain in english

I will just simply try to say

case

I have to two event library in same div

1. hammer event

2. scroller

problem if hammer drag event catch then

In hammer Drag event

I use this function ev.gesture.preventDefault(); then

never scroller working

so I try to delete ev.gesture.preventDefault(); then

hammer "drag" event called irregularly

so I try to find usage of hammer

then I Found "dragstart"

dragstart -> drag called

this event tell me chagement of x, Y position

so I can catch the what the people want to do

example)

case 'dragstart' :

var movingX = ev.gesture.deltaX;

var movingY = ev.gesture.deltaY;

if(Math.abs(movingX) > Math.abs(movingY)){ // willing to moving left or right

currentScreenStatus.isLeftScrolling = false;

}else{

currentScreenStatus.isLeftScrolling = true; //willing to mving up or down

}

break;

case 'touch':

break;

case 'drag':

if(currentScreenStatus.isLeftScrolling){ //if up or down will use scroller event

return;

}

ev.gesture.preventDefault();

Tuesday, March 25, 2014

contenteditable in html5

contenteditable is that you can edit in div, p and so on

anyway i will show you example

<div contenteditable='true'>
hello my name is david jung
</div>

Monday, March 24, 2014

Communication Between Controllers~!

This is the way that
how Controllers are communicating with each other

summary
call $rootScope.$broadcast of Service and
other controller will listen $scope.$on

1. Service Registation

var app= angular.module('myApp', ['onsen.directives', 'ngTouch']);
app.factory('messageService', function ($rootScope) {
var messenger = {
messages: [],
identity: 0,

addMessage: function (tab) {
$rootScope.$broadcast('messageAdded', tab.url);
}
};
return messenger;
});

2. Controller Sending

app.controller('titleCtrl', ['$scope','messageService', function ($scope, messageService) {

$scope.onClickTab = function (tab) {

$scope.currentTab = tab.url;

console.log('dd');

messageService.addMessage(tab);

}

2. Controller Receiving

app.controller('tabsCtrl', ['$scope', function ($scope, myService) {

$scope.$on("messageAdded", function (event, args) {

console.log('myEvent');

console.log('args : ' + args);

$scope.currentTab =args;

});

}