How to set a variable according to ui-view?

Question

I have a pageheader template above angularjs's ui-view. I want to specify a variable showDropdown to control the appearence of some DOMs in pageheader. The showDropdown variable is specific with the ui-view. For example showDropdown is true in the first view, and false in the second view. How can I make it change according to ui-view?

I've tried to set the variable in the onEnter() of stateProvider, but has no influence.

HTML,

<pageheader></pageheader>
<br />
<div class="container">
  <div class="row"><div class="col-xs-12 no-padding"><div ui-view="view"></div></div></div>
</div>

pageherder template,

<div>
......
</div>
<div ng-if="showDropdown">
  ........
</div>

JS,

.config(function($stateProvider)
{
    $stateProvider
        .state('printer',
        {
            url: "/printer",
            views:
            {
                "view":
                {
                    templateUrl: "/static/tpls/cloud/app/printer.php"
                }
            }，
            onEnter: function(){
                showDropdown = false;
            }
        })
        .state('control',
        {
            url: "/control",
            views:
            {
                "view":
                {
                    templateUrl: "/static/tpls/cloud/app/control.php"
                }
            }
        })
})

Edit for Pengyy's answer

    app.controller('CloudController', ['$scope', '$http', '$interval', '$timeout', 'optSev', '$state', '$rootScope', function($scope, $http, $interval, $timeout, optSev, $state, $rootScope)
    {
        var search  = window.location.search.substring(1);
        var paras = search.split("&");
        paras = paras[0].split("=");
        pid = paras[1];
        $scope.pid = pid;
        $scope.active = {};
        $scope.idle = true;
        $scope.active.status = {};
        $scope.active.state = {};
        $scope.showDropdown = $state.current.showDropdown;
        //$scope.showDropdown = $rootScope.showDropdown;
//console.log($scope.showDropdown);
console.log($state);
console.log($state.current);
//console.log($state.$current);
.....

It's very weried,

console.log($state); // it shows the showDropdown

console.log($state.current); // the showDropdown is missed.

@NinhPham [`$rootScope` cannot be accessed when instance during configuration phase](https://stackoverflow.com/a/10489658/6521116) — LF00, May 31 '17 at 05:08
do you want to show/hide `pageheader` component itself or part of it? — Pankaj Parkar, May 31 '17 at 05:35
@PankajParkar part of it. is it a bad implementation here? I have not much experience in angularjs. — LF00, May 31 '17 at 08:22

Pengyy · Accepted Answer · 2017-05-31T05:56:24.827

2

you can simply add showDropdown to your state config like below:

$stateProvider
    .state('printer',
    {
      url: "/printer",
      views:
      {
        "view":
        {
          templateUrl: "/static/tpls/cloud/app/printer.php"
        }
      }，
      showDropdown: false
    })

and retrieve it by $state.current.showDropdown in your controller.

demo plunker.

edited May 31 '17 at 05:56

answered May 31 '17 at 03:23

Pengyy

37,383
15
83
73

I add this line `showDropdown: false;`, but get `SyntaxError: missing } after property list` – LF00 May 31 '17 at 03:58
@KrisRoofe I'm really sorry, you have to remove `;` :P – Pengyy May 31 '17 at 03:59
yeah, when moved the `;`, there is no such error. I'm testing if it works now. – LF00 May 31 '17 at 04:02
In the controller I can see the 'showDropdown` in the `$state` variable, but not in the `$state.current`. I add the weired issue in my question. – LF00 May 31 '17 at 04:50
@KrisRoofe where did you add the `console.log`? It seems there are different states where you write `console.log`. – Pengyy May 31 '17 at 04:53
I eidt it in my question – LF00 May 31 '17 at 04:59
@KrisRoofe sorry for late response, can you produce your problem with this plunker? https://plnkr.co/edit/BYevwa?p=preview – Pengyy May 31 '17 at 05:22
Thank you for your help. I did not use controller for each ui-view. I just use app.controller. https://plnkr.co/edit/8RPCpS?p=preview, when you navigate to Hello view, you can check the output of console.log. – LF00 May 31 '17 at 06:29
1

@KrisRoofe I think this is not the correct usage for ui-view, but still you can deal it with `$state.get('printer').showDropdown`. :-) – Pengyy May 31 '17 at 06:42
I finally move `pageheader` into each uiview template, and add `controller: function($scope, $state) { $scope.showDropdown = $state.current.showDropdown; }` to `"view"`. – LF00 Jun 01 '17 at 10:14

How to set a variable according to ui-view?

1 Answers1