Plunker:http://plnkr.co/edit/0efF1Av4lhZFGamxKzaO?p=preview
下面是我的标题,有一个ng-show="cornerLogo"
我只想在about,login和register视图中设置true
,但false
是主视图。
<body id="body_id"
ng-app="myApp"
ng-controller="HomeCtrl">
<header>
<section ng-show="cornerLogo">
<h1><a href="index.html">Logo</a></h1>
</section>
<nav id="main_nav">
<ul>
<li><a ui-sref="about">About</a></li>
<li><a ui-sref="login">Sign In</a></li>
<li><a ui-sref="register">Create Account</a></li>
</ul>
</nav>
</header>
<ui-view></ui-view>
所以它适用于我的HomeCtrl,因为它是页面上的主控制器。
var app = angular.module('app-home', [])
.controller('HomeCtrl', ['$scope', function($scope) {
$scope.cornerLogo = false;
}]);
然而,当我切换到about,login或register视图时,我失去了$scope
有没有办法在我的stateProvider中为ui-router设置某个全局var?否则,你会怎么解决这个问题?
var app = angular.module('bitAge',
['ui.router',
'app-header',
'app-home',
'app-about',
'app-login',
'app-register'])
.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '_views/home.html',
controller: 'HomeCtrl',
})
.state('about', {
url: '/about',
templateUrl: '_views/about.html',
controller: 'AboutCtrl'
})
.state('login', {
url: '/login',
templateUrl: '_views/login.html',
controller: 'LoginCtrl'
})
.state('register', {
url: '/register',
templateUrl: '_views/register.html',
controller: 'RegisterCtrl'
});
// default view:
$urlRouterProvider.otherwise('/home');
}]);
答案 0 :(得分:2)
除了我在问题中的评论,要解决您的问题,您可以采用这种方法。
您在HomeCtrl
partial的州注册中将home
指定为绑定控制器。因此,为您的应用程序创建一个主控制器。这样就可以将职责分开了。注入$state
并公开名为hideLogo
的方法并使用$state.is
来确定显示/隐藏徽标的逻辑。
即:
var app = angular.module('app-home')
.controller('MainCtrl', ['$scope', '$state', function($scope, $state) {
$scope.hideLogo = function(){
return $state.is('home');
}
}]);
在索引html中使用MainCtrl
作为应用程序的主控制器。
<body ng-app="myApp" ng-controller="MainCtrl">
<header>
<section
ng-hide="hideLogo()">
<h1><a href="index.html">Corner Logo</a></h1>
</section>
<强> Plnkr 强>
如果要直接在视图上使用$state
,则需要在$ scope对象的MainCtrland set $ state中注入它,以便您可以直接使用它。虽然我强烈建议不要使用这种技术,但是不应该在范围对象中以及最终在视图中公开状态。只显示viewmodel中所需的内容。
即在MainCtrl中:
var app = angular.module('app-home')
.controller('MainCtrl', ['$scope', '$state', function($scope, $state) {
$scope.$state= $state;
}]);
并在视图中使用它:
<section
ng-hide="$state.is('home')">
答案 1 :(得分:1)
您可以查看当前状态,并依赖于此,显示或不显示您的徽标。
<section ng-show="$state.includes('home')">
<h1><a href="index.html">Logo</a></h1>
</section>
另外,要导航的锚元素应该像<a ui-sref="about">About</a>
一样,等等,因为如果使用普通href
属性,则角度不会改变状态。
此外,您需要在主模块中注入$state
,然后才能使用$state
模块
var app = angular.module('myApp',
['ui.router',
'app-home',
'app-about']).run(function ($state,$rootScope) {
$rootScope.$state = $state;
})
更新:
以下是answer
的punklr