Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html  ng-app="MyModule">
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="http://code.angularjs.org/1.1.5/angular.js"></script>
  
  
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body ng-controller="ctrl">
​
 
      <label>FirstVal: </label>
      <input type="number" ng-model="FirstVal">
  <br>
      <label>SecondVal:</label>
      <input type="number" ng-model="SecondVal">
    <br>   
Result: <span calculator="FirstVal"></span>
  
</body>
</html>
 
var MyModule = angular.module('MyModule', []);
​
function ctrl($scope, numberFilter) {
    $scope.FirstVal = 3000;
    $scope.SecondVal = 2000;
}
​
MyModule.directive('calculator', function (numberFilter) {
    return function (scope, element, attrs) {
​
      scope.$watch(attrs.calculator, function (value) {
            scope.FirstVal = value;
​
            element.text(scope.SecondVal + scope.FirstVal);
        });
​
        scope.$watch('SecondVal', function (value, asd1) {
            element.text(scope.SecondVal + scope.FirstVal);
        });
    };
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers