Why does ng-click not work in case-1, but does in case-3?

Question

There is clearly something fundamental im not yet understanding.

Im trying to make user of the Modal module in Angular Ui.Bootstrap but im finding that my clicks are

Answer 1

For that to work, you have to define alert on your $scope:

$scope.alert = function(text) {
    alert(text);  
};

Relevant piece from documentation:

AngularJS restricts access to the Window object from within expressions since it's a known way to execute arbitrary Javascript code.

https://docs.angularjs.org/error/$parse/isecwindow

Answer 2

ng-click is meant for use with either a function in the current scope (so for example $scope.alert = window.alert would solve the problem of not being able to alert there) or an angular expression. it looks like angular does not allow you to use global scope methods in there (it might be looking them up in the current $scope, from which they are missing).

Answer 3

You cannot execute that kind of code in ng directives. They look for content in your local scope.

If you do this in your controller:

$scope.alert = function(){
  alert('alerted!');
};

and then in your template

ng-click="alert()"

It will execute the javascript alert properly.

Answer 4

https://docs.angularjs.org/guide/expression

 <div class="example2" ng-controller="ExampleController">
  Name: <input ng-model="name" type="text"/>
  <button ng-click="greet()">Greet</button>
  <button ng-click="window.alert('Should not see me')">Won't greet</button>
</div>

Answer 5

ng-click expects an angular expression. Internally, angular is using the $parse service to evaluate the expression in ng-click="expression".

An angular expression is not the same as regular javascript code. $parse uses string parsing to interpret the expression and it restricts your access to variables, functions, and objects to just those which are properties of the $scope object, or properties of any $parent scope objects which happen to be available further up the prototypical inheritance chain.

So in theory you could gain access to globals like this:

 $scope.window = window;
 $scope.alert = alert;

... and then in your template do ng-click="window.alert('hello!')"

...or... ng-click="alert('hello!')"

---

Or you could do this just once:

 $rootScope.window = window;
 $rootScope.alert = alert;

Then any scope that prototypically inherits from $rootScope will also have access to window and alert.

---

... but there are good reasons never to do either of the above, except possibly for debugging purposes. That's not to say that decorating the $rootScope is always a bad idea, there is at least one special case where decorating angular's scope can accomplish something that would be very difficult to do otherwise.