Skip to main content

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

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…