Angular: Empty Fiddle

http://angularjs.org/

by boneskull

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script>
<div ng-controller="MyCtrl">
    
    w:<input type="text" ng-model="cWidth"></input>
    h:<input type="text" ng-model="cHeight"></input>
    <div test-animate="{width: cWidth, height: cHeight}" style="border: 2px solid #000; display: inline-block; width: 100px; height: 50px;"></div>
</div>

JavaScript

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.cWidth = 100;
};

myApp.directive('testAnimate', function($parse) {
    return {
      link: function(scope, element, attrs) {
        scope.$watch(attrs.testAnimate, function(newval, oldval) {

            if (newval !== oldval) {
                console.log(newval);
                element.animate({ width: newval.width, height: newval.height});
            }
          }, true);
        }
      };
});