Here is my model
<html ng-app="myApp"> <button id="rainBtn" ng-click="makeItRain()">Make it rain ! </button> <div class="tab-pane active" id="lobbyTab" ng-controller="chatController"></div> And here is my myApp.js
var myApp = angular.module('myApp',[]); makeItRain = function() { alert("ok"); } makeItRain is never called:
How to call the makeItRain() function ?
Make a Controller
var myApp = angular.module('myApp',[]); myApp.controller("sky", ["$scope", function($scope) { $scope.makeItRain = function() { alert("ok"); } }]); Set the controller
<button id="rainBtn" ng-controller="sky" ng-click="makeItRain()"> You can't get a reference from a global function as an angular expression. One possible way to do this without using a controller is to use $rootScope and attach the function during the .run() phase, although it is not recommended:
myApp.run(function($rootScope) { $rootScope.makeItRain = function() { alert('Raining!'); }; }); Another way is to abandon the idea of attaching an event handler via ng-click directive and simply create a directive. This solution assumes that the event handler you are trying to attach will perform dom manipulations.
myApp.directive('makeItRain', function() { return function(scope, elem, attr) { elem.on('click', function() { makeItRain(); }); }; }); and then attach it in the HTML:
<button id="rainBtn" make-it-rain>Make it rain ! </button> 