Unable to access 'window' object in an angular expression without a controller

Question

I am trying to show a <p> only in the HTTP protocol.

Here is what I have so far:

angular
.module('myApp',[])
.controller('myCtrl', ['$scope', '$window', function($scope, $window){

  $scope.name = 'Superhero';

  console.log('$window.location.protocol = ' + $window.location.protocol); // just checking

}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

<div ng-app="myApp">

  <p ng-if="window.location.protocol === 'http:'">This needs to be shown in HTTP only.</p> <!-- doesnt work with $window either -->

  <div ng-controller="myCtrl">
    Hello, {{name}}!
  </div>

</div>

This snippet doesnt work in both HTTP and HTTPS.

I am pretty sure the problem is about accessing the window object.

How do I fix this?

Edit: Note that the <p> does not have any controller.

Estus Flask · Accepted Answer · 2015-10-15 03:41:45Z

2

Because you can use nothing but scope properties in expressions. That's how they work. It is

$scope.$root.protocol = $window.location.protocol;

and

<p ng-if="protocol  === 'http:'">This needs to be shown in HTTP only.</p>

edited Oct 15, 2015 at 3:41

answered Oct 14, 2015 at 16:14

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Manoj Shevate Over a year ago

@rahul-desai - even in this case <p> should be inside controller, right? how does this solve your problem?

Estus Flask Over a year ago

Yes, @ManojShevate has the point. The code will be workable outside the controller (which is bad thing because the entire app should be controlled by 'ng-controller's or other directives) by assigning the variable to root scope, it will also be inherited by nested scopes.

Manoj Shevate · Accepted Answer · 2015-10-14 16:07:05Z

Not sure why $window is not working, but here is the solution you can try -

use comparison operator inside controller and then add model in rootscope which is accessible out side the controller scope -

refer below code snippet, Hope this will solve your problem -

   angular
.module('myApp',[])
.controller('myCtrl', ['$scope', '$window','$rootScope', function($scope, $window,$rootScope){

  $scope.name = 'Superhero';
  $rootScope.httpOnly = $window.location.protocol === 'http:'; 

}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">

  <p ng-if="$root.httpOnly">Outside Controller</p>

  <div ng-controller="myCtrl">
    Hello, {{name}}!
  </div>

</div>

Collectives™ on Stack Overflow

Unable to access 'window' object in an angular expression without a controller

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related