【发布时间】:2017-05-31 13:56:24
【问题描述】:
我在 angularjs 的 ui 视图上方有一个 pageheader 模板。我想指定一个变量showDropdown 来控制pageheader 中某些DOM 的出现。 showDropdown 变量特定于 ui-view。例如,showDropdown 在第一个视图中是 true,在第二个视图中是 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>
pageherder 模板,
<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"
}
}
})
})
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.
【问题讨论】:
-
尝试使用$rootScope:
$rootScope.showDropdown = true -
你想显示/隐藏
pageheader组件本身还是它的一部分? -
只是其中的一部分
-
@PankajParkar 是其中的一部分。这是一个糟糕的实现吗?我在 angularjs 方面没有太多经验。
标签: javascript html angularjs angular-ui-router