JSFiddle - React, Tailwind, and code Playground

by james0n

HTML

<link rel="stylesheet" href="http://code.ionicframework.com/1.3.3/css/ionic.css">
<script src="http://code.ionicframework.com/1.3.3/js/ionic.bundle.js"></script>
<ion-pane>
        
<ion-header-bar align-title="right" class="bar-stable"  ng-controller="headercontroller">
          <span class="badge badge-positive">{{total_selected}} boule<span ng-if="total_selected > 1">s</span></span>
        <h1 class="title selected">{{total_price}} &euro;</h1>
</ion-header-bar>
        
<ion-content class="has-header" ng-controller="contentcontroller">

          <h2>Glace</h2>

<ion-list>            
  <ion-item ng-repeat="parfum in parfums" ng-class="{selected:parfum.quantite > 0}">
    {{parfum.nom}}
      
       <span class="item-note" style="font-size:20px;">
          <a class="icon ion-minus-circled button-clear button-dark" style="display:inline-block;" decrease></a>
       <div style="display:inline-block;" ng-class="{selected: parfum.quantite > 0}">{{parfum.quantite}}</div>
    <a class="icon ion-plus-circled button-clear button-dark" style="display:inline-block;" increase></a>
    </span>

  </ion-item>
</ion-list>
          
  
</ion-content>
      
<ion-footer-bar align-title="center" class="bar-assertive" ng-controller="footercontroller">
  <div class="buttons">
    <button class="button icon-left ion-chevron-left " >&nbsp;Convives</button>
  </div>
  <h1 class="title">{{title}}</h1>
  <div class="buttons" ng-click="doSomething()">
    <button class="button icon-right ion-chevron-right">Terminer&nbsp;</button>
  </div>
</ion-footer-bar>
        
</ion-pane>


<script id="my-modal.html" type="text/ng-template">
  <div class="modal">
    <ion-header-bar>
      <h1 class="title">My Modal title</h1>
    </ion-header-bar>
    <ion-content>
      V!
    </ion-content>
  </div>
</script>

JavaScript

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
var starter = angular.module('starter', ['ionic']);


starter.directive('increase', function($rootScope)
{
    return {
    link: function(scope, elm, attrs) { 
        elm.bind("click", function()
                  {
                      if ($rootScope.total_selected == $rootScope.maximum_selectable)
                      {
                          // scope.openModal();
                          scope.showAlertMax();
                       return false;   
                      }
                      
                      // console.log('scope.parfum.quantite ->');
                      // console.log(scope.parfum.quantite);
                      // return(scope.parfum.quantite);
          scope.$apply(function() {
          scope.parfum.quantite = scope.parfum.quantite + 1;
        });
          $rootScope.$apply(function() {
          $rootScope.total_price = $rootScope.total_price + scope.parfum.prix;
          $rootScope.total_selected = $rootScope.total_selected + 1;
        });
                      
         });
        }   
    }
});





starter.directive('decrease', function($rootScope)
{
    return {
    link: function(scope, elm, attrs) { 
        elm.bind("click", function()
                  {
                      
                      if (scope.parfum.quantite < 1)
                      {
                       return false;   
                      }
                          
                          
                      // console.log('scope.parfum.quantite ->');
                      // console.log(scope.parfum.quantite);
                      // return(scope.parfum.quantite);
          scope.$apply(function() {
          scope.parfum.quantite = scope.parfum.quantite - 1;
  ...