Posts

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

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

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

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>

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