Angular directive test
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 obj="inputdata" prop="title">click to set title to Button 1 ( works now)</button>
<button ng-update2="inputdata.title">click to set title to Button 2</button>
<button ng-update3 obj="inputdata" prop="title">click to set title to Button 3</button>
</div>
</div>
CSS
.selected {
background-color: #ff0000;
}
JavaScript
var app = angular.module('myApp', []);
app.directive('ngUpdate1', function () {
return function (scope, element, attrs) {
element.bind('click', function () {
scope.$apply(function () {
scope[attrs.obj][attrs.prop] = "Button 1";
});
});
};
});
app.directive('ngUpdate2', function () {
return function (scope, element, attrs) {
element.bind('click', function () {
var target = attrs.ngUpdate2.split('.');
scope.$apply(function () {
scope[target[0]][target[1]] = "Button 2";
});
});
};
});
app.directive('ngUpdate2', function () {
return function (scope, element, attrs) {
element.bind('click', function () {
var target = attrs.ngUpdate2.split('.');
scope.$apply(function () {
scope[target[0]][target[1]] = "Button 2";
});
});
};
});
app.directive('ngUpdate3', function () {
return {
scope: {
targetObject: '=obj'
},
link: function (scope, element, attrs) {
element.bind('click', function () {
console.log( scope.targetObject)
scope.$apply(function () {
scope.targetObject[attrs.prop]='Button 3';
});
});
}
}
});
function Ctrl1($scope) {
$scope.inputdata = {
title: "test"
};
}