Skip to main content


Showing posts from March, 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..…

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>…

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

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;             console.log('dd'); messageService.addMessage(tab);

        } }
2.  Controller Receiving
app.controller('tabsCtrl', ['$scope', function ($scope, myService) { $scope.$on("messageAdded", function (event, arg…