Angular Binding Getter/Setter
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.angularjs.org/1.0.1/angular-1.0.1.js"></script>
<div ng-app="myApp">
<body>
<form name="form">
<input type="text" ng-model="$ngModelValue" ng-model-getter-setter="get=getValue();set=setValue($value)"/> {{myDerivedValue}}
<div>
<input type="text" ng-model="myValue" />
<div>
</form>
</body>
</div>
JavaScript
var myApp = angular.module('myApp', []);
myApp.directive(
{
'ngModelGetterSetter': function () {
return {
require: "ngModel",
controller: ctrl,
link: function(scope, element, attrs, ngModelCtrl)
{
var getterSetterExpression = attrs.ngModelGetterSetter;
var tokens = getterSetterExpression.split(";");
var getExpression = tokens[0].split("=")[1];
var setExpression = tokens[1].split("=")[1];
function updateViewValue(newValue, oldValue)
{
ngModelCtrl.$setViewValue(newValue);
ngModelCtrl.$render();
var updateExpression = attrs.ngModel + "=" + getExpression;
scope.$eval(updateExpression);
}
function updateModelValue(newValue, oldValue)
{
ngModelCtrl.$setViewValue(newValue);
scope.$value = ngModelCtrl.$viewValue;
scope.$eval(setExpression);
}
updateViewValue(0, 1);
scope.$watch(getExpression, updateViewValue);
scope.$watch(attrs.ngModel, updateModelValue);
}
};
}
});
function ctrl($scope) {
$scope.getValue = function ()
{
return $scope.myValue;
}
$scope.setValue = function (val)
{
$scope.myValue = val;
$scope.myDerivedValue = $scope.myValue * 2;
}
$scope.setValue(5);
}