我正在尝试学习 Angular，并且正在构建一个小型应用程序。问题是当我点击 ng-view 时，我原来的 css 被弄乱了。
我希望所有元素在呈现新 View 时都保持在当前位置。
我在这里创建了一个plunker
http://plnkr.co/edit/re40GAAB8NYFdrGBSTlk?p=preview
app.js
angular.module("fitbird", ['ngRoute'])
.controller("HomeCtrl", function($scope) {
$scope.number = 1;
})
.controller('UserRegistrationsCtrl', ['$scope', function ($scope) {
}])
.controller('UserSessionsCtrl', ['$scope', function ($scope) {
}])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/welcome/index.html.erb',
controller: 'HomeCtrl'
})
.when('/sign_in', {
templateUrl: 'templates/user_sessions/new.html',
controller: 'UserSessionsCtrl'
})
.when('/sign_up', {
templateUrl: 'templates/user_registrations/new.html',
controller: 'UserRegistrationsCtrl'
})
.otherwise({
redirectTo: '/'
});
}]);
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.14/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div class="col-md-4 col-md-offset-2">
<ul class="list-inline" ng-app="my-app" ng-controller="HomeCtrl">
<li><a href="#sign_in">Sign In</a></li>
<li><a href="#sign_up">Sign Up</a></li>
<div ng-view=""></div>
<li>Help</li>
<li>{{5+5}}</li>
</ul>
</div>
signin.html
<div class="login-form">
<form ng-submit="submitLogin(loginForm)" role="form" ng-init="loginForm = {}">
<button class="btn btn-primary fb-btn">Log in with Facebook</button>
<button class="btn btn-danger google-btn">Log in up with Google+</button>
<h4 class="text-center">Or</h4>
<input type="text" placeholder="Email">
<input type="text" placeholder="Password">
<a href="password" class="forgot-password">Forgot Password?</a>
<button class="btn btn-danger login-btn">Log in</button>
</form>
</div>
我的四个标题如下
Sign In Sign Up Help 10
当我点击一个 View 时，help 和 10 会呈现在 View 下方。
感谢帮助
最佳答案
嗯..
放:
<li>Help</li>
<li>{{5+5}}</li>
像这样在 ng-view 之前:
<div class="col-md-4 col-md-offset-2">
<ul class="list-inline" ng-app="my-app" ng-controller="HomeCtrl">
<li><a href="#sign_in">Sign In</a></li>
<li><a href="#sign_up">Sign Up</a></li>
<li>Help</li>
<li>{{5+5}}</li>
<div ng-view=""></div>
</ul>
</div>
它们出现在下方的原因是您在它们之前的列表元素中呈现这些 View 。是否真的有必要在该列表中呈现这些 View ？将导航置于顶部然后将这些 View 完全呈现在无序列表下不是更好吗？
关于javascript - angularjs - ng-view 重新排列 html 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28819760/