How to dynamically change view in angularjs using ui-router

Question

I have a named view called myView in which I have two div elements that I want to show conditionally using ng-show based on whether the value of $scope.states['currentState'] is 'A' or 'B'. The value of $scope.states['currentState'] is changed when an anchor tag is clicked which calls the doStuff function on the myController controller.

The issue I am having is when the anchor tag is clicked and the doStuff function is clicked, it shows on the console that the value of $scope.states['currentState'] has been modified, but its not updating the myView named view accordingly.

Following is the code for app.js, myView.html and index.html files. The index.html file is being used as a <div ui-view></div> in an index.ejs file that I am rendering using Express with Node.js.

app.js

var app = angular.module("app", ['ui.router']).

    config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {

        $locationProvider.html5Mode(true);

        $urlRouterProvider.otherwise('/');

        $stateProvider
            .state('home', {
                url: '/',
                views: {

                    '': { templateUrl: 'partials/index.html' },

                    'myView@home': {
                        templateUrl: 'partials/myView.html',
                        controller: 'myController'
                    },

                    'myOtherView@home': {
                        templateUrl: 'partials/myOtherView.html',
                        controller: 'myController'
                    }
                }

            });

    }])

app.controller("myController", ['$scope', function($scope){

    var states = ['A', 'B'];
    $scope.states = states;
    $scope.states['currentState'] = states['currentState'] || 'A';

    $scope.doStuff = function(toState) {
        //doing stuff
        $scope.states['currentState'] = toState;
        console.log($scope.states['currentState']);
    };

} ]);

index.html

<div class="main">
    <div class="container">
        <div class="row margin-bottom-40">
            <div class="col-md-12 col-sm-12">
                <div class="content-page">
                    <div class="row">
                        <div ui-view="myView"></div>
                        <div ui-view="myOtherView"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

myView.html

<div ng-controller='myController'>
    <div ng-show="states['currentState'] == 'A'">
        //displaying this div if the currentState is A
        <a ng-click="doStuff('B')">Do stuff and show B</a>
    </div>
    <div ng-show="states['currentState'] == 'B'">
        //displaying this div if the currentState is B
    </div>
</div>

Could somebody help me understand that why am not getting the div with states['currentState'] == 'B' shown, even when I see the value of console.log($scope.states['currentState']) changed from 'A' to 'B' when the doStuff function is called in myController?

Edit: Here is the demo of the issue I am facing.

@c0d3junk13: Here plnkr.co/edit/R2SUDhVZh0VA6YKxhGbp?p=preview is the demo that shows the given issue in action. — skip
– skip, Commented Aug 9, 2014 at 12:24
@c0d3junk13: $scope.$apply(); at the end of the doStuff throws the Error: [$rootScope:inprog] $apply already in progress error. — skip
– skip, Commented Aug 9, 2014 at 15:16

c0d3junk13 · Accepted Answer · 2014-08-09 17:30:18Z

1

Okay So I was mistaken in my comment. The real issue was that you used {{}} in your ng-show which is not needed as these expect to take angular expressions.Also I would make current state a property of your scope as at the moment you are trying to make it a property of an array inside your scope. Hope that helps! Below is the modified code for your view:

<div ng-controller='MainCtrl'>
  <div ng-show="currentState === 'A'">
    <a ng-click="doStuff('B')">Do stuff and show B</a>
  </div>
  <div ng-show="currentState === 'B'">
    <a ng-click="doStuff('A')">Do stuff and show A</a>
  </div>
</div>

EDIT: Working plunker http://plnkr.co/edit/1llQMQEdxIwu65MNoorx?p=preview

edited Aug 9, 2014 at 17:30

answered Aug 9, 2014 at 16:11

c0d3junk13

1,1629 silver badges6 bronze badges

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

4 Comments

skip Over a year ago

I got them {{ and }} left there by mistake, must have forgotten to save the updated plunkr. It's still not working after removing the {{ and }}.

c0d3junk13 Over a year ago

did you change current state to be it's own property on the scope object, you can't assign $scope.states a property it's an array.

skip Over a year ago

Many thanks for the plunker :). states['currentState'] also worked.

c0d3junk13 Over a year ago

No problem, it's cool that it did but for future reference assigning keys to an array is kind of like making a half hash map half array abomination :L

Collectives™ on Stack Overflow

How to dynamically change view in angularjs using ui-router

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related