0

What I want

I have 3 views. All views have their own controller. The first view is home. From the home view the user goes to view 2 by clicking on a div element. On view 2 the user opens view 3 by clicking on a button. On view 3 the user clicks on a button and goes back to view 2.

The problem I am facing is that I want to know if the user came from view 2. In that case I want to show different content then when the user came from the home view.

Create another view

Can it be done without creating another view?

My try

I created a service that keeps track of if I came from view 3, but the controller of view 2 isn't executed anymore after view 2 got opened from the home view. So basicly $scope.fromViewThree isn't updated and still false.

I added $route.reload() before $window.location = "#/app/viewtwo"; because I thought it would reinitialise the controllers(source) and then $scope.fromViewThree should have been updated. I also tried adding it below $window.location = "#/app/viewtwo";.

Controller view 2

.controller('ViewTwoCtrl', function($scope, $window, fromViewThree) {
    $scope.fromViewThree = fromViewThree.getBoolean();
    fromViewThree.setBoolean(false);
    $scope.goToViewThree = function() {
        $window.location = "#/app/viewthree";
    };
})

Controller view 3

.controller('ViewThreeCtrl', function($scope, $window, fromViewThree) {
    $scope.goToViewTwo = function() {
        fromViewThree.setBoolean(true);
        $window.location = "#/app/viewtwo";
    };
})

Directives.js

.service('fromViewThree', function () {
        var b = false;

        return {
            getBoolean: function() {
                return b;
            },
            setBoolean: function(value) {
                b = value;
            }
        };
})

HTML view 2

<div ng-if="fromViewThree == false">
    <p>You came from view home!</p>
</div>
<div ng-if="fromViewThree == true">
    <p>You came from view three!</p>
</div>
<div>
    <button ng-click="goToViewThree()" ng-if="fromViewThree == false">Go to view 3</button>
    <button ng-click="goToViewThree()" ng-if="fromViewThree == true">Go again to view 3</button>
</div>

HTML view 3

<div class="row">
    <button class='button' ng-click="goToViewTwo()">Lets go to view two!</button>
</div>
Community
  • 1
  • 1
Sjoerd Pottuit
  • 2,307
  • 4
  • 20
  • 35

2 Answers2

0

Try implementing the views and controllers using the UI router. Once you have the states setup, accessing the previous state will be easy Angular - ui-router get previous state

Community
  • 1
  • 1
John
  • 114
  • 10
  • I have looked at the given answers in the SO question you provided and tried using resolve in the ViewTwo state, but that doesn't seem to work: `resolve: { PrevStateName: [ "$state", function ($state) { var currentStateData = $state.current.name; return currentStateData; } ] },` So to be clear resolve does what it needs to do, but not what I need it to do. `PrevStateName` is still `app.home` when coming from view 3 (it should be app.viewthree). – Sjoerd Pottuit Feb 16 '16 at 12:07
  • 1
    `$rootScope.$on('$stateChangeSuccess', function (ev, to, toParams, from, fromParams) { //assign the "from" parameter to something });` is this being broadcast at all? – John Feb 16 '16 at 12:15
  • No. I added the code inside my 'ViewTwoCtrl' controller and tried `console.log(from);`. – Sjoerd Pottuit Feb 16 '16 at 12:30
0

Solution

Manu Antony pushed me in the right direction towards $rootScope(more info). I added code in app.js which stores the previous state/view name into $rootScope.fromViewThree. I can now access the previous state/view name in the HTML of view 2 and the previous state/view name will be updated when switching state/view has been successful.

Warning:

All scopes inherit from $rootScope, if you have a variable $rootScope.data and someone forgets that data is already defined and creates $scope.data in a local scope you will run into problems.

Controller view 2

.controller('ViewTwoCtrl', function($scope, $window) {        
    $scope.goToViewThree = function() {
        $window.location = "#/app/viewthree";
    };
})

Controller view 3

.controller('ViewThreeCtrl', function($scope, $window) {
    $scope.goToViewTwo = function() {            
        $window.location = "#/app/viewtwo";
    };
})

Directives.js

I no longer need the service because I use $rootScope now to monitor which view is my previous view.

HTML view 2

<div class="row" ng-if="fromViewThree != 'app.viewthree'">
    <p>You came from view home!</p>
</div>
<div class='row' ng-if="fromViewThree == 'app.viewthree'">
    <p>You came from view three!</p>
</div>
<div class="row">
    <button id="activateCameraBtn" class='button' ng-click="goToViewThree()" ng-if="fromViewThree != 'app.viewthree'">Go to view 3</button>
    <button id="activateCameraBtn" class='button' ng-click="goToViewThree()" ng-if="fromViewThree == 'app.viewthree'">Go again to view 3</button>
</div>

HTML view 3

The HTML for view 3 hasn't changed.

App.js

angular.module('myApp', [])

.run(function($rootScope) {
    $rootScope.$on('$stateChangeSuccess', function (ev, to, toParams, from, fromParams) {
        $rootScope.fromViewThree = from.name; //e.g. app.home
    });    
})

....
Sjoerd Pottuit
  • 2,307
  • 4
  • 20
  • 35