To create a controller function that can be use with an element’s event attribute, you need to define a function with it’s implementation in it and then attached it to the $scope.

Below I have created a new Javascript file called app.js with a controller called AppController. In the $scope I have a property for storing text and one for attaching a function called onClick. When the onClick function is invoked, the message property will be set with a message ‘Hello, World!’:

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

// Controllers
app.controller('AppController', ['$scope', function($scope) {
		$scope.message = '';
		$scope.onClick = function() {
			$scope.message = 'Hello, World!';
		}
	}
]);

Below I create a html page with body that uses the AppController controller, I have a input element that is a button type and I use ng-click to bind the function that I have create in the controller. I have created a div that will display the message property every time the button is clicked:

<html ng-app="app.demo">
	<head>
	<title>Learn AngularJS - Functions</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min.js"></script>
	<script src="app.js"></script>
	</head>
	<body ng-controller="AppController">
		<input type="button" ng-click="onClick()" value="Click Here" />
		<div><h1>{{message}}</h1></div>
	</body>
</html>

Download Source Code

Shares