cannot access scope in views - Angular

Question

For some reason I cannot retrieve the data from my controllers scope variables in my views. All of my views use the same controller, so I am not sure what went wrong. Any help would be appreciated.

Here is my App.js

    var app = angular.module('app', [
    'ngRoute'
    ]);


// Route configurations
app.config(['$routeProvider', function ($routeProvider){
$routeProvider.when('/', {
templateUrl: 'partials/home.html',
controller: 'MainController'
})
.when('/countries', {
templateUrl: 'partials/countriesList.html',
controller: 'MainController'
})
.when('/details', {
templateUrl: 'partials/countryDetails.html',
controller: 'MainController'
})
.otherwise({
 redirectTo: '/'
 });
}]);



// Main Controller Setup
app.controller('MainController', ['$scope', MainController]);
function MainController ($scope){
$scope.hello = 'hello';
}

Here is one of the view I am trying to access the scope in:

<h1>Country List</h1>
<a href="#details"><button class="btn">Countries Details</button></a>

<p>hello: {{hello}}</p>

Here is my index.html

<!DOCTYPE html>
<html ng-app="app">
 <head>
  <title>Countries and Capitals</title>
  <link rel="stylesheet" type="text/css" href="css/vendor/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="css/main.css">
 </head>
 <body ng-controller="MainController" ng-cloak>
  <div class="container">
    <div class="row">
      <div class="col-sm-12 text-center">
        <ng-view></ng-view>
      </div>
     </div>
   </div>


  <script src="js/vendors.js"></script>
  <script src="js/scripts.js"></script>
 </body>
</html>

I get no error message, I am also unable to console.log the scope variable from the controller. — JET1991
– JET1991, Commented Nov 3, 2015 at 18:02
yes, I have to be because routing works perfectly. I just can't access scope variables. — JET1991
– JET1991, Commented Nov 3, 2015 at 18:34

Errorpro · Accepted Answer · 2015-11-03 18:10:42Z

1

The problem because of nested scopes. The better way use some nested scopes is use controllerAs method. Could you try:

```

<body ng-controller="MainController as myctrl" ng-cloak>

<p>hello: {{myctrl.hello}}</p>

```

answered Nov 3, 2015 at 18:10

Errorpro

2,4432 gold badges18 silver badges17 bronze badges

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

8 Comments

JET1991 Over a year ago

no luck =(. I am trying to access the hello variable in one of the views. Not directly in the index

Errorpro Over a year ago

Oh i see. You use ng-controller in your body tag. It's unnesessary because ur controller binds by route. Try to remove it.

JET1991 Over a year ago

no luck, Should I attempt to use rootscope or something along those lines?

Errorpro Over a year ago

No no, let me do jsfiddle example for your case.

Errorpro Over a year ago

jsfiddle.net/5v9ztqwc here it is. Take a look and give me response is it ok or not.

|

marc_s · Accepted Answer · 2019-04-20 18:56:43Z

0

What you do while adding a controller in ng-route is you create another scope of the same controller. My suggestion is you use either no controller i.e. remove controller attribute or add $parent. in the view you are referencing.

The first one is preferred if u want to have same scope over a set of pages, the second one is preferred when u have different controllers for different pages.

Along with that if u want to access global variables, u can add them to $rootScope and access them globally..

Hope this helps

edited Apr 20, 2019 at 18:56

marc_s

760k185 gold badges1.4k silver badges1.5k bronze badges

answered May 15, 2018 at 11:59

vishal ajwani

11 bronze badge

Collectives™ on Stack Overflow

cannot access scope in views - Angular

2 Answers 2

8 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Related