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

回答

相关问题