Angular.js: ng-show élément de dollars de l'état.actuel.le nom est d'une certaine valeur
Je suis à la recherche pour afficher un bloc de code HTML que lorsque $state.current.name
est égal à about.list
. Jusqu'à présent j'ai le code suivant mais il ne semble pas être le basculement de l'élément en fonction de l'état.
index.html
<nav class="global-navigation">
<ul class="list">
<li class="list-item">
<a class="list-item-link" ui-sref="home">
Home
</a>
</li>
<li class="list-item">
<a class="list-item-link" ui-sref="about">
About
</a>
</li>
<li class="list-item" ng-show="$state.current.name == 'about.list'">
<a class="list-item-link" ui-sref="about.list">
List
</a>
</li>
</ul>
</nav>
app.js
var myApp = angular.module('myApp', ['ui.router'])
.config(['$urlRouterProvider', '$stateProvider',
function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/404.html');
$stateProvider.
//Home
state('home', {
url: '/',
templateUrl: 'partials/_home.html',
controller: 'homeCtrl'
}).
//About
state('about', {
url: '/about',
templateUrl: 'partials/_about.html',
controller: 'aboutCtrl'
}).
//About List
state('about.list', {
url: '/list',
controller: 'aboutCtrl',
templateUrl: 'partials/_about.list.html',
views: {
'list': { templateUrl: 'partials/_about.list.html' }
}
});
}]
);
Vous devez vous connecter pour publier un commentaire.
Ou
JS
HTML
$state
injecter. Cette solution met le$state
variable sur la$rootScope
apporter de la variable accessible à tout enfant étendues.Vous pouvez utiliser des filtres comme isState ou includedByState.
La vue (html) ne savent pas à propos de la variable
$state
. Il ne connaît que la$scope
qui est associé à la vue.Vous pouvez exposer les
$state
variable sur la$scope
à l'intérieur du contrôleur qui est associé à ce point de vue (vous pourriez avoir à injecter $état dans votre controller):Puis modifiez l'expression dans votre balisage légèrement: