javascript - 如何根据ui-view设置变量？

我在angularjs的ui视图上方有一个pageheader模板。我想指定一个变量showDropdown来控制pageheader中某些DOM的出现。 showDropdown变量特定于ui-view。例如，在第一个视图中showDropdown是true，在第二个视图中是false。如何根据ui-view进行更改？

我试图在onEnter()的stateProvider中设置变量，但是没有影响。

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>

分页模板

<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"
                }
            }
        })
})

编辑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);
.....

很累

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

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

最佳答案

您只需将showDropdown添加到状态配置中，如下所示：

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

并通过控制器中的$state.current.showDropdown进行检索。



演示plunker。