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">
    <!--because the ChildCtrl's $scope inherits from its parent $scope,
    properties and methods of both are available in my view-->
    <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>

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

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

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

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>

    <script src="//"></script>
    <script data-require="angular.js@1.0.7" data-semver="1.0.7" src=""></script>
    <link rel="stylesheet" href="style.css" />
    <style type="text/css" media="all">
      .controller-a {background-color: yellow;}
      .controller-b-style {background-color: lightgrey;}

  <body data-ng-app="webApp">
    <h1>Hello Plunker!</h1>
    <div class="controller-a" ng-controller="ControllerA">
      Controller A
        <button ng-click="cntPlusPlus()">cnt++</button> CNT: {{cnt}}
      <button ng-click="addB()">Add B</button>
      <div ng-repeat="B in Bs">
       <div ng-include=""></div>
    <script type="text/ng-template" id="b-template">
      <div ng-controller="ControllerB">this is controller b: <button ng-click="cntPlusPlus()">cnt++</button></div>
      var webApp = angular.module("webApp",[]);
      webApp.controller("ControllerA", function($scope){
        $scope.cnt = 0;
        $scope.cntPlusPlus = function(){
        $scope.Bs = [];
        $scope.addB = function(){
      webApp.controller("ControllerB", function($scope){
        $scope.cntPlusPlus = function(){
          console.log("overwrite plus plus");
         // $scope.$parent.$parent.$parent.cnt++;  //should be moved to service

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

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


                    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;
currentScreenStatus.isLeftScrolling = true; //willing to mving up or down
                   case 'touch':

                    case 'drag':
if(currentScreenStatus.isLeftScrolling){   //if up or down will use scroller event

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

Monday, March 24, 2014

Communication Between Controllers~!

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

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;



2.  Controller Receiving

app.controller('tabsCtrl', ['$scope', function ($scope, myService) {
$scope.$on("messageAdded", function (event, args) {
            console.log('args : ' + args);
            $scope.currentTab =args;