My Blog List

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>
  </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;

        });
}