Angular Bootstrap Example

by Aaronias

HTML

<!-- This Shows that a single ng-app can be used, but all subsequent ng-app directives must be 
     bootstrapped manually into their own HTML element
 -->
<div ng-app="app1" > 
    <div ng-controller="ctrl">
        <div ng-model="total">Main Total:{{total}}</div>
        <div dir update="update(total,count,amount)"> </div>
         <div dir update="update(total,count,amount)"> </div>
    </div>
   
    
</div>

JavaScript

var app1 = angular.module('app1', []);
//console.log(app1);
app1.controller('ctrl', function ($scope) {
    $scope.one = '1';
    $scope.update = function(total, count, amount){
          total = count + amount;
        console.log("total:" + total + "\ncount:" + count + "\namount:" + amount);
          $scope.total = total;
    };
    $scope.total = 5;
});


app1.directive("dir", function() {
    function hey () {
      alert("this worked");  
    };
    return {
        scope:{
            update:"&"   
        },
        template:'<div ng-model="total">Total: {{total}}</div>' + 
                  'Amount<input type="text" ng-model="amount" ng-change="doThis()"></input>' + 
                 'Count<input type="text" ng-model="count" ng-change="update({total:total,amount:amount,count:count})"></input>',
        link: function (scope, element, attrs){
            scope.update = function(){
              scope.total = scope.amount + scope.count;
            };
                        
        }
                 
    }
});