Angular directive test

by mrajcok

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="Ctrl1">
    <h3>Title</h3><br/>
    <input ng-model="inputdata.title">

    <h3>Isolated scope</h3>
    <div ng-repeat="i in [1]">
        <button ng-update1="inputdata.title">click to set title to Button 1 (works with $parse)</button>
        <button ng-update2="inputdata.title">click to set title to Button 2</button>
    </div>
</div>

CSS

.selected {
    background-color: #ff0000;
}

JavaScript

var app = angular.module('myApp', []);
app.directive('ngUpdate1', function($parse) {
        return function(scope, element, attrs) {
            var model = $parse(attrs.ngUpdate1);
            console.log(model(scope)); // logs "test"
            element.bind('click', function() {
               model.assign(scope, "Button 1");
               scope.$apply();
            });
        };
    });
app.directive('ngUpdate2', function() {
    return function(scope, element, attrs) {
        element.bind('click', function() {
            scope.$apply(function() {
                scope.inputdata.title = "Button 2";
            });
        });
    };
});

function Ctrl1($scope) {
    $scope.inputdata = {title:"test"};
}