Javascript 在angular应用程序中使用引导文件输入，css是'；行不通_Javascript_Html_Css_Angularjs_Twitter Bootstrap

Javascript 在angular应用程序中使用引导文件输入，css是'；行不通

javascript html css angularjs twitter-bootstrap

Javascript 在angular应用程序中使用引导文件输入，css是'；行不通,javascript,html,css,angularjs,twitter-bootstrap,Javascript,Html,Css,Angularjs,Twitter Bootstrap,我正在使用mean stack和bootstrap构建一个应用程序来设计网页。在其中一个表单上，用户需要上传一个图像，所以我决定添加插件来实现这一点。在我将文件输入添加到表单后，它可以正常工作，但无论如何它都没有设置样式。我希望它看起来就像他们在网站上的例子一样我的目录结构，删除了一些部分以压缩它： . ├── app/ ├── bower.json ├── config/ │ └── db.js ├── node_modules/ ├── package.json ├── public/

我正在使用mean stack和bootstrap构建一个应用程序来设计网页。在其中一个表单上，用户需要上传一个图像，所以我决定添加插件来实现这一点。在我将文件输入添加到表单后，它可以正常工作，但无论如何它都没有设置样式。我希望它看起来就像他们在网站上的例子一样

我的目录结构，删除了一些部分以压缩它：

.
├── app/
├── bower.json
├── config/
│   └── db.js
├── node_modules/
├── package.json
├── public/
│   ├── index.html
│   ├── js/
│   │   ├── app.js
│   │   ├── appRoutes.js
│   │   ├── controllers/
│   │   │   └── MainController.js
│   │   └── services/
│   ├── libs/
│   │   ├── angular/
│   │   ├── angular-bootstrap/
│   │   ├── angular-route/
│   │   ├── bootstrap/
│   │   ├── bootstrap-fileinput/
│   │   ├── jquery/
│   │   └── mobile-angular-ui/
│   └── views/
│       ├── main.html
├── README.md
└── server.js

index.html

<head>
    <meta charset="UTF-8">
    <title>My App</title>
    <!-- CSS -->
    <link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="libs/bootstrap-fileinput/css/fileinput.min.css">
    <!-- JS -->
    <script src="libs/angular/angular.js"></script>
    <script src="libs/angular-route/angular-route.js"></script>
    <script src="libs/angular-bootstrap/ui-bootstrap.js"></script>
    <script src="libs/jquery/src/jquery.js"></script>
    <script src="libs/bootstrap-fileinput/js/fileinput.min.js"></script>

    <!-- ANGULAR CUSTOM -->
    <script src="js/app.js"></script>
    <script src="js/appRoutes.js"></script>
    <script src="js/controllers/MainController.js"></script>

</head>
<body ng-app="my_app">
<div class="container">

    <!-- HEADER -->
    <nav class="navbar navbar-inverse">
    <div class="navbar-header">
        <a class="navbar-brand" href="/">Welcome to the App!</a>
    </div>
    </nav>

    <!-- ANGULAR DYNAMIC CONTENT -->
    <div ng-view></div>

</div>
</body>

<div class="container">
<h1>Test form</h1><br>
<form>
<div>
    <label class="control-label">Name:</label>
    <input type="text" ng-model="newItem.name">
</div>
<div>
    <label class="control-label">Description:</label>
    <input type="text" ng-model="newItem.description">
</div>
<div>
    <label class="control-label">Select File</label>
    <input id="input-1" type="file" class="file">
</div>
<button type="submit">Submit</button>
</form>
</div>


我的应用程序

以及表格中的相关代码，这是一个角度视图：

view.html

<head>
    <meta charset="UTF-8">
    <title>My App</title>
    <!-- CSS -->
    <link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="libs/bootstrap-fileinput/css/fileinput.min.css">
    <!-- JS -->
    <script src="libs/angular/angular.js"></script>
    <script src="libs/angular-route/angular-route.js"></script>
    <script src="libs/angular-bootstrap/ui-bootstrap.js"></script>
    <script src="libs/jquery/src/jquery.js"></script>
    <script src="libs/bootstrap-fileinput/js/fileinput.min.js"></script>

    <!-- ANGULAR CUSTOM -->
    <script src="js/app.js"></script>
    <script src="js/appRoutes.js"></script>
    <script src="js/controllers/MainController.js"></script>

</head>
<body ng-app="my_app">
<div class="container">

    <!-- HEADER -->
    <nav class="navbar navbar-inverse">
    <div class="navbar-header">
        <a class="navbar-brand" href="/">Welcome to the App!</a>
    </div>
    </nav>

    <!-- ANGULAR DYNAMIC CONTENT -->
    <div ng-view></div>

</div>
</body>

<div class="container">
<h1>Test form</h1><br>
<form>
<div>
    <label class="control-label">Name:</label>
    <input type="text" ng-model="newItem.name">
</div>
<div>
    <label class="control-label">Description:</label>
    <input type="text" ng-model="newItem.description">
</div>
<div>
    <label class="control-label">Select File</label>
    <input id="input-1" type="file" class="file">
</div>
<button type="submit">Submit</button>
</form>
</div>


测试表

姓名：
说明：
选择文件
提交

你看到这里有什么不对劲吗？当我在浏览器中查看页面时，看起来fileinput样式根本没有应用于输入，而不是被引导css或其他内容覆盖

让我知道Javascript是否也有用。

用您发布的代码很难诊断。你能创建一个plunker或JSFIDLE来显示问题吗？我刚刚花了20分钟左右的时间试图让它在plunker或JSFIDLE中工作，不幸的是，我甚至无法加载视图。我对javascript世界还很陌生，以前也没有使用过。如果我编辑我的文章来添加更多的代码，会有帮助吗？也许是目录结构？是的，你能发布的任何东西都有助于诊断。