Angular+JQ+Bootstrap

by jacobwsmith

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.angularjs.org/1.0.0/angular-1.0.0.js"></script>
<div ng-controller="MyCtrl">
    <input ui-change="strText"/>
    <input ui-change="strText"/>
    <p>{{strText}}</p>
    <hr>
    <input ui-change="str"/>
    <input ui-change="str"/>
    <p>{{str}}</p>
</div>

JavaScript

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

app.directive('uiChange', function() {    
    return {
        restrict: 'A',
        scope:{'uiChange':'=' },
        link: function(scope, elm, attrs) {  
            
            // Watch for the change
            scope.$watch('uiChange', function(nVal) {
                elm.val(nVal); 
            });
            
            // On blur we change
            elm.bind('blur', function() {
                var currentValue = elm.val();                
                if( scope.onChange !== currentValue ) {
                    scope.$apply(function() {
                        scope.uiChange = currentValue;
                    });
                }
            });
            
        }
    };        
});

app.controller('MyCtrl', function($scope) { 
    $scope.strText = "Hello";
    $scope.str = "Bye";
});