Skip to content

Instantly share code, notes, and snippets.

@ecoleman

ecoleman/eric-test.html

Created October 4, 2014 21:51
Show Gist options
  • Save ecoleman/8590569b6e1b5c75223f to your computer and use it in GitHub Desktop.
Save ecoleman/8590569b6e1b5c75223f to your computer and use it in GitHub Desktop.
Download ZIP
AngularJS Directive Callback Example
Raw
eric-test.html
<button value="1">1</button>
<button value="2">2</button>
<button value="3">3</button>
<button value="4">4</button>
<button value="5">5</button>
Raw
index.html
<!DOCTYPE html>
<html lang="en" ng-app="TestApp">
<head>
<meta charset="UTF-8">
<title>Test Application</title>
</head>
<body>
<div ng-controller="TestCtrl">
<h1>Hello</h1>
<p>{{message}}</p>
<div eric-test rating-changed="updateRating(rating)"></div>
</div>
<script src="https://code.angularjs.org/1.3.0-rc.4/angular.js"></script>
<script>
var app = angular.module("TestApp", []);
app.controller('TestCtrl', function($scope) {
$scope.message = "Hello World";
$scope.updateRating = function(rating) {
alert("New Rating = " + rating);
};
});
app.directive('ericTest', function() {
return {
templateUrl: 'eric-test.html',
scope: {
ratingChanged: '&'
},
link: function(scope, element, attrs) {
element.on("click", function(event) {
var newRating = parseInt(event.target.value, 10);
if (newRating < 0 || newRating == NaN) return;
scope.ratingChanged({ rating: newRating });
});
}
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment