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

我想學習角度，並且正在構建一個小應用程序。問題是，當我點擊一個ng-view時，我的原始CSS變得混亂。angularjs-ng-view重新安排html元素

我希望所有元素在呈現新視圖時保留在當前位置。

我創建這裏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送渲染視圖下方。

幫助表示讚賞

來源

2015-03-02 Darkmouse

嗯..

地說：

<li>Help</li> 
<li>{{5+5}}</li>

的NG-視圖像這樣前：

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

他們下面出現的原因是你在列表元素之前渲染這些視圖。真的有必要在那個列表中呈現這些視圖嗎？難道你最好在頂部導航，然後完全在無序列表下呈現這些視圖？

來源

2015-03-02 21:32:27 floor

謝謝，這幫了我很多。 – Darkmouse 2015-03-03 15:42:50

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

回答

相關問題