Unable to access $scope variable within same controller

Question

So I have this form submit button in my view 1 -- main.html

<div ng-init="init()" ng-controller="ReadController">
    <button type="submit" class="btn btn-primary" ng-click="getFile()">Show File</button>
</div>

Here is my js for modifying the fileContent variable in getFile()

$scope.fileContent = "Hi";
$scope.getFile = function() {
        console.log("Chosen file:" + $scope.fileName);
        $location.path("/showFile");
        $scope.fileContent = "new hi";
    };

Here is my routing config

    mainApp.config(function($routeProvider) {
        $routeProvider.when('/showFile',{
            controller:'ReadController',templateUrl:'viewFile.html'});
});

Here is my view 2 -- viewFile.html

<div ng-controller="ReadController" class="container">
{{fileContent}}
</div>

I get the output as "hi" and not "new hi". Does the $scope get reset when navigating to a different page within the same controller?

score 2 · Answer 1 · answered Sep 18 '15 at 06:04

2

Vinod - $scope is the only object (which is injected into the controller) that's not singleton. Any other object which is injected into angularjs controllers/directives/services are singleton. You might have to rewrite your controller to accept a service and you can change the service variable to "new Hi". If you use this in the second view, you'll see the changes. See below for the changed code.

sampleController = app.controller(ReadController,["ReadService","$Scope", function(readService,$scope){

readService.fileContent = "Hi";
$scope.getFile = function() {
        console.log("Chosen file:" + $scope.fileName);
        $location.path("/showFile");
        readService.fileContent = "new hi";
}]);

answered Sep 18 '15 at 06:04

Subash

119
7

Not the ony one. The controller itself is not a singleton either. So it reinstantiated when going to the second view, and reinstantiating it re-executes the line `$scope.fileContent = "Hi";`. So, even if the scope was a singleton (and I agree it's not a singleton), the OP's code wouldn't work. – JB Nizet Sep 18 '15 at 06:07
Agreed. That's the reason I've used the service variables. Services are singleton and the suggested code will work. – Subash Sep 18 '15 at 06:13
Can you please take a look at this plunk . I have tried implementing it using a service: http://plnkr.co/edit/qKjW6FbNdmD8vRZ2qA8H?p=preview – Vinod Kumar Rai Sep 18 '15 at 12:41
Vinoth - Yeah, that's what I mean. The value that's saved in the service will be the accessible throught application. It doesn't gets initialized. http://plnkr.co/edit/ryekhkOUgH8YIbYxPUQn?p=preview – Subash Sep 20 '15 at 23:26
Sry Subash, but I think the plunkr you ve provided does nothing when the button Show file is clicked . Can you help me out here if I m missing something or provide a working plnkr. – Vinod Kumar Rai Sep 21 '15 at 12:31

dfsq · Answer 2 · 2015-09-18T06:12:34.933

The problem is that you should not redeclare controller with ngController directive, because you already have it declared via route configuration.

This is the correct content of the main.html and viewFile.html file:

<div ng-init="init()">
    <button type="submit" class="btn btn-primary" ng-click="getFile()">Show File</button>
</div>

<div class="container">
    {{fileContent}}
</div>

and of course make sure you put ngView on the page where both partials will be loaded.

Then you might have some main controller where you would define your business logic ($scope.getFile method). Take a look at the demo below.

angular.module('demo', ['ngRoute'])

.config(function($routeProvider) {
    $routeProvider
    .when('/', {
        controller: 'ReadController',
        template: '<div ng-init="init()"><button type="submit" class="btn btn-primary" ng-click="getFile()">Show File</button></div>'
    })
    .when('/showFile', {
        controller: 'ReadController',
        template: '<div class="container">{{fileContent}}</div>'
    });
})

.controller('MainCtrl', function($scope, $location) {
    $scope.fileContent = "Hi";
    $scope.getFile = function() {
        $location.path("/showFile");
        $scope.fileContent = "new hi";
    };
})

.controller('ReadController', function() {
    // some stuff here
});

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

<div ng-app="demo" ng-controller="MainCtrl">
    <ng-view></ng-view>    
</div>

Demo: http://plnkr.co/edit/zyuFaovCU5ZEVJMNRRJL?p=preview

Above works because ReadController being a child of the MainController inherits parent scope via prototypical chain and it naturally has access to fileContent too.

How can I achieve this using a single controller ? To me the ReadController seems redundant. Please help me understand. — Vinod Kumar Rai, Sep 18 '15 at 11:09
Then you either use rootScope or service like in another answer. I don't know what you are building, but having another controller for separate route is actually wise choice and not redundant once your code evolve. But if it's redundant then use service. — dfsq, Sep 18 '15 at 11:38
I ve tried modifying your plunk with a single controller & inclusion of a service. Still cant get it to work — Vinod Kumar Rai, Sep 18 '15 at 12:40

Unable to access $scope variable within same controller

2 Answers2

Linked