在这里，我试图通过使用 ui-sref-active 和 $state.includes() 添加事件类来突出显示点击区域，但它不适用于$state.includes()，但是当我通过 Controller 看到它的值时，我得到的值是 true。帮帮我。
这是代码片段:
var app = angular.module('myApp', ['ui.router']);
app.controller('myCtrl', function($scope,$state) {
$scope.res=$state.includes('')
});
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('page');
$stateProvider
.state('page', {
url: '/page',
template: "u clicked on Luffy"
})
.state('paper', {
url: '/paper',
template: "u clicked on Zoro"
})
}).active {
background-color: red;
color: white;
}<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<hr>
<h2>with ui-sref-active</h2>
<button ui-sref-active=active ui-sref='page'>Luffy</button>
<button ui-sref-active=active ui-sref='paper'>Zoro</button>
<hr>
<h2>with {'active':$state.includes('')}</h2>
<button ng-class="{'active':$state.includes('page')}" ui-sref='page'>Luffy</button>
<button ng-class="{'active':$state.includes('paper')}" ui-sref='paper'>Zoro</button>
<hr> Result=
<ui-view></ui-view>
<hr>
</div>
</body>
</html>最佳答案
$state 无法在 HTML 中访问，您可以调用 Controller 中的函数来实现此目的
var app = angular.module('myApp', ['ui.router']);
app.controller('myCtrl', function($scope,$state) {
$scope.res = $state.includes('');
$scope.checkActive = function(state) {
return $state.includes(state)
}
});
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('page');
$stateProvider
.state('page', {
url: '/page',
template: "u clicked on Luffy"
})
.state('paper', {
url: '/paper',
template: "u clicked on Zoro"
})
}).active {
background-color: red;
color: white;
}<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<hr>
<h2>with ui-sref-active</h2>
<button ui-sref-active=active ui-sref='page'>Luffy</button>
<button ui-sref-active=active ui-sref='paper'>Zoro</button>
<hr>
<h2>with {'active':$state.includes('')}</h2>
<button ng-class="{'active':checkActive('page')}" ui-sref='page'>Luffy</button>
<button ng-class="{'active':checkActive('paper')}" ui-sref='paper'>Zoro</button>
<hr> Result=
<ui-view></ui-view>
<hr>
</div>
</body>
</html>关于javascript - ui-sref-active 与 $state.includes()，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44067220/