如何通过不同的视图/控制器在特定元素上设置 ng-show
How to set ng-show on a specific element through different views/controllers?
>Plunker: http://plnkr.co/edit/0efF1Av4lhZFGamxKzaO?p=preview
下面是我的标题,有一个ng-show="cornerLogo"
我只想在关于、登录和注册视图上设置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;
}]);
但是,当我切换到关于,登录或注册视图时,我丢失了该$scope
有没有办法以某种方式在我的状态提供商的 ui 路由器的某个地方设置全局变量?否则,您将如何处理这个问题?
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');
}]);
除了我在问题中的评论外,要解决您的问题,您可以采用这种方法。
您已HomeCtrl
在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>
普罗提
如果要直接在视图上使用$state
,则需要在 MainCtrl 中注入它,并在$scope对象上设置$state,以便可以直接使用它。尽管我强烈建议不要使用此技术,但不应在范围对象中公开状态,并最终在视图中公开状态。只需仅公开视图模型中所需的内容即可。
即在主控制中:
var app = angular.module('app-home')
.controller('MainCtrl', ['$scope', '$state', function($scope, $state) {
$scope.$state= $state;
}]);
只需在视图上将其用作:
<section
ng-hide="$state.is('home')">
您可以检查您的当前状态,并取决于此,显示或不显示您的徽标。
<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;
})
更新:
这是带有答案的朋克lr
- 使用angularjs ng Show/ng hide显示和隐藏不同的内容
- 我需要NG-IF/NG-SWITCH还是NG-SHOW&NG-HIDE
- 如何在AngularJS视图中使用promise(ng-show)
- AngularJS:如何使用java脚本函数更改跨度的ng-show条件
- ng show和ng hide don'I don’我一秒钟都不工作
- 基于参数(angular)调用特定元素上的ng show
- ng-show 不更新 DOM 元素
- 如何通过不同的视图/控制器在特定元素上设置 ng-show
- Angular:使用$last使最后一个元素使用ng-show可见
- 使用ng-if/ng-show/ng-switch的Angular条件显示会简要地显示这两个元素
- AngularJS ng-show一个条件和多个元素
- Ng-show和ng-hide用于元素-当单击隐藏项时,再次单击时,它们都会重新出现
- AngularJS的ng-show指令在隐藏元素之前显示元素
- 在ng-repeat中查找特定元素的Ng-show
- ng-show在条件为false时隐藏元素的延迟
- AngularJS的ng-show不能处理新的DOM元素
- 有没有可能在Angular的ng-show表达式中获得HTML元素的计数?
- Data-ng-show和数组元素
- ng-hide和ng-show实际加载元素并隐藏它,还是只在ng-show上加载
- Angular.js:当$state.current.name是某个值时,ng-show元素