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

Question

我在 angularjs 的 ui-view 上面有一个 pageheader 模板。我想指定一个变量 showDropdown 来控制某些 DOM 在 pageheader 中的出现。 showDropdown 变量特定于 ui-view。例如，showDropdown 在第一个 View 中为 true，在第二个 View 中为 false。如何让它根据ui-view改变？

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

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.

---

Answer 1

您可以简单地将 showDropdown 添加到您的状态配置中，如下所示:

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

并通过 Controller 中的 $state.current.showDropdown 检索它。

---

演示 plunker .