CODEWITHSUNDEEP
javascriptangularjs
Joe
Joe

Reputation: 443

Angular ng-click with inline function

Why does onclick="window.history.back()" work and angular's ng-click="window.history.back()" doesn't?

Upvotes: 7

Views: 18167

Answers (5)

jaacoder
jaacoder

Reputation: 41

You can make this work adding window to your $scope, or even better to $rootScope so every $scope has access to window and thus your initial attemp would work as you've expected.

Example adding it to $rootScope:

<script>
  app.run(['$rootScope', function($rootScope) {
    $rootScope.window = window
  }])
</script>

Then you just call:

<button type="button" ng-click="window.history.back()">Go back</button>

or:

<button type="button" ng-click="window.alert('it works!')">Alert!</button>

or whatever variable or function in global javascript scope you want.

Upvotes: 4

Zahidul
Zahidul

Reputation: 11

onclick is an js event, so it can call function in javascript window object.

But ng-click is an angular directive, which can only call functions which is available in the $scope. window is not available in $scope. In angularjs we can do this by:

ng-click="doTheBack()"

$scope.doTheBack = function() { window.history.back(); };

Upvotes: 1

Abdul Mateen Mohammed
Abdul Mateen Mohammed

Reputation: 1894

onclick="window.history.back()" works because it is vanilla JavaScript and onclick is an event on the element.

ng-click="window.history.back()" doesn't work because ng-click is an angular directive and angular is looking for an object called window on the controller's scope.

You can gain access to the window object, in angular the suggested way is to declare a dependency on the $window service and do any operations required on the $window object.

Reasons to use $window service: it helps to do unit testing when using $window service and not the global window object.

EDIT: below info used from Pro AngularJS book - chapter 19

Why and When to Use the Global Object Services

The main reason that AngularJS includes these services is to make testing easier. I get into testing in Chapter 25, but an important facet of unit testing is the need to isolate a small piece of code and test its behavior without testing the components it depends on—in essence, creating a focused test. The DOM API exposes functionality through global objects such as document and window. These objects make it hard to isolate code for unit testing without also testing the way that the browser implements its global objects. Using services such as $document allows AngularJS code to be written without directly using the DOM API global objects and allows the use of AngularJS testing services to configure specific test scenarios.

Upvotes: 2

John
John

Reputation: 465

onclick is an javascript event, so it can call function in javascript window object.

Where as

ng-click is an angular directive, which can only call functions which is available in the $scope. window is not available in $scope.

Upvotes: 3

Raulucco
Raulucco

Reputation: 3426

because in the template you use the controller or directive scope. So angular expects the scope object to have a property named window instead of searching for it in the global scope of the script

Upvotes: 2

Related Questions