Question

我正在尝试学习角度，并正在构建一个小应用程序。问题是当我点击ng-view时，我原来的css搞砸了。

我希望在渲染新视图时所有元素都保持在当前位置。

我在这里创建了一个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

当我点击视图时，帮助和10会在视图下方呈现。

感谢帮助

Answer 1

嗯..

把：

<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>

它们出现在下面的原因是您在列表元素之前呈现这些视图。是否真的有必要在该列表中呈现这些视图？你最好不要让你的导航在顶部，然后完全在无序列表下渲染这些视图吗？

angularjs - ng-view重新排列html元素

1 个答案: