我有一个有趣的问题。我有一个典型的单页应用程序，在 index.html 中，我有页眉、页脚和，使用 ui-router 注入(inject) View 。
当用户在主页 (index.html) 上时，我怎样才能在...上有完整的页面背景，而在任何其他页面上，该背景不存在(白色)。
html:
<body ng-controller="MainController">
<header>
<nav>
<ul>
<li><button>Login</button></li>
<li><button>Tell Me More!</button></li>
</ul>
</nav>
</header>
<main>
<section class="container">
<div ui-view /></div>
</section>
</main>
<footer>
<ul>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</footer>
<script src="/assets/js/vendor/angular.min.js"></script>
<script src="/assets/js/vendor/angular-ui-router.js"></script>
<script src="/assets/js/vendor/angular-animate.js"></script>
<script src="/assets/js/all.min.js"></script>
</body>
应用程序.js:
var app = angular.module('myApp', ['ui.router', 'ngAnimate']);
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('index', {
url: '/index',
templateUrl: 'partial/home.html',
controller: 'HomeController'
})
.state('login', {
url: '/login',
templateUrl: 'partial/login.html',
controller: 'LoginController'
});
$urlRouterProvider.otherwise('/index');
});
最佳答案
您可以为不同的页面应用不同的样式或图像，方法是设置将由 Controller 范围继承的 $rootScope 变量，或者通过 UIrouter 将一些样式参数发送到不同的状态)，然后您将在 View 中使用这些设置来应用您的样式/图像。
简短说明:当用户在主页上时，他们不在 index.html 中，而是处于您定义为的状态作为主页(您在最初的问题中有这个假设)。
一些示例:
选项 1 - $rootScope 中的设置
在你的模块的 app.run(...) 中，你监听状态变化事件并为你的特定路由设置一些变量，即:
angular.module('yourModuleNameHere').run(function($rootScope, ...
//some global settings here:
$rootScope.isHome = false;
$rootScope.hasInnerHeader = false;
$rootScope.bodyClass = "";
$rootScope.bodyStyle = "";
// Page change - specific settings
$rootScope.$on("$stateChangeSuccess", function(event, currentRoute, previousRoute) {
//some other processing you may need
switch ($state.current.name) {
case 'main.home':
$rootScope.headerClass = 'home-header';
$rootScope.isHome = true;
$rootScope.bodyClass = "home-body background-full";
break;
default:
//some default settings
}
并且您可以直接在部分文件中使用这些设置:
<div id="header" class="{{headerClass}}">...some header content here....</div>
因为局部作用域继承了$rootScope。
选项 2 - 从 UIrouter 发送参数(您可以从配置文件中获取它们，将其作为提供程序注入(inject)到您的 app.config 中)
为您的路线设置一些页面特定数据:
$stateProvider
.state('index', {
url: '/index',
templateUrl: 'partial/home.html',
controller: 'HomeController',
pageSettings: {
bodyClass: "homepage-class";
}
})
在部分 Controller 中，您可以像这样使用它:
不要忘记为$state注入(inject)依赖
function _init() {
// ***** Route params check *******
if ($state.current.pageSettings && $state.current.pageSettings.bodyClass) {
//do something with the class, ie: put it in the scope:
$scope.myPartialClass = $state.current.pageSettings.bodyClass
//or switch through different settings
switch ($state.current.pageSettings.bodyClass) {
case "homepage-class":
$scope.hideSomeDiv = true;
$scope.anotherSetting = false;
break;
case "homepage-fullscreen-class":
$scope.hideSomeDiv = false;
break;
default:
}
}
}
_init();//call the init method
优点:这些方法允许您为不同的页面设置特定的样式、更改一些布局选项、从配置文件自定义它们等
缺点:您需要做更多的工作，如果您只需要设置单个页面的样式，则没有必要
注意:上面的代码没有经过测试，但应该给你一个想法
关于javascript - 整页背景仅在主页/索引页上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33804862/