angularjs: how to call a function without scope?

Question

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 ?

what happens when you change ng-click to onclick? – Mike Cheel Aug 12 '14 at 18:23 — Mike Cheel, Aug 12 '14 at 18:23

score 3 · Answer 1 · answered Aug 12 '14 at 18:24

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()">

ryeballar · Answer 2 · 2014-08-12T18:30:54.407

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>

angularjs: how to call a function without scope?

2 Answers2

Linked