`ng-scope` 类导致 UI 出现问题

Orangejuice 发表于 Dev

橙汁

我有一个问题，ng-scopecss 类导致我的 UI 出现问题。

基本上我希望我的toDoListRowdiv 的高度为 70%。

但这将不适用，除非我将ng-scope类定义为 100% 的高度，问题是它会在应用新范围时进一步导致意外行为。

我曾尝试将设置ng-scope为具有最小高度而不仅仅是高度，但这仍然意味着我toDoListRow根本没有高度。

请参阅第一张图片以了解它的外观。

第二张图片是当我不对 ng-scope 类应用任何高度或使用min-height:100%.

索引.html

<!DOCTYPE html>
<html lang="en" ng-app="ToDoListApp">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>To Do App</title>
    <script src="angular/angular.min.js"></script>
    <script src="app.module.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="app/assets/css/styles.css">
    <link href="https://fonts.googleapis.com/css?family=Acme&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/4c765e5630.js" crossorigin="anonymous"></script>
</head>

<body>

    <div ng-controller="homePageCtrl">
        <div class="row header">
            <div class="col-12">
                <h1>DOINGO</h1>
                <p>0 Open Tasks</p>
            </div>
        </div>
        <div class="row toDoListRow">

            <div class="row newItem" ng-show="toDoList.length > 1" ng-repeat="item in toDoList">
                <div class="col-2">
                    <button class="itemComplete btn"><i class="far fa-check-circle fa-2x"></i></button>
                </div>
                <div class="col-8">
                    <h4>{{item.project}}</h4>
                    <p>{{item.task}}.</p>
                </div>
                <div class="col-2">
                    <button class="btn deleteItem"><i class="far fa-times-circle fa-2x"></i></button>
                </div>
            </div>

        </div>

        <div class="row addItemRow">
            <div class="col-12 text-center">
                <button type="button" class="btn btn addItem" data-toggle="modal" data-target="#newItemModal">
                    <i class="fas fa-plus-circle fa-3x"></i>
                </button>
                <div class="modal fade" id="newItemModal" tabindex="-1" role="dialog" aria-labelledby="newItemModal"
                    aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title col-11 text-center" id="newItemModal">Add new item</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <form ng-submit="addNewToDoTask()">
                                    <div class="form-group">
                                        <label for="projectInput"><strong>Project</strong></label>
                                        <input type="text" class="form-control" id="projectInput"
                                            ng-model="projectInput" placeholder="Enter the name of the project">
                                    </div>
                                    <div class="form-group">
                                        <label for="taskInput"><strong>Task</strong></label>
                                        <input type="text" class="form-control" id="taskInput" ng-model="taskInput"
                                            placeholder="Enter your task details">
                                    </div>
                                    <button type="submit" class="btn modalSubmitButton">Add</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
    </script>
</body>

</html>

样式文件

html,
body {
    height: 100%;
    width: 100%;
}

.row {
    margin: 0;
}

.ng-scope {
    min-height: 100%;
}

.header {
    background-color: rgb(35, 35, 80);
    color: white;
    height: 20%;
    width: 100%;
    text-align: center;
    padding-top: 2.5rem;
}

h1 {
    font-family: 'Acme', sans-serif;
    margin: 0;
}

.toDoListRow {
    height: 70%;
    width: 100%;
    background-color: rgb(252, 70, 100);
}

.newItem {
    width: 100%;
    margin-top: 2rem;
}

.addItemRow {
    height: 10%;
    background-color: rgb(252, 70, 100);
}

button {
    display: inline-block;
}

.modal-title {
    text-align: center;
    color: white;
}

.modal-header {
    background-color: rgb(35, 35, 80);
}

.modal-body {
    background-color: rgb(252, 70, 100);
}

.modalSubmitButton {
    background-color: rgb(35, 35, 80);
    color: white;
}

乔治亚

不要ng-scope为此目的使用该类。

而是定义您自己的类：

̶.̶n̶g̶-̶s̶c̶o̶p̶e̶ ̶{̶
.toDoList {
    height: 100%;
}

.toDoListRow {
    height: 70%;
    width: 100%;
    background-color: rgb(252, 70, 100);
}

并在模板中使用它：

<div ng-controller="homePageCtrl" class="toDoList">
    <div class="row header">
        <div class="col-12">
            <h1>DOINGO</h1>
            <p>0 Open Tasks</p>
        </div>
    </div>
    <div class="row toDoListRow">    
        <div class="row newItem"  ng-repeat="item in toDoList"
             ng-show="toDoList.length > 1" >
            <div class="col-2">
                <button class="itemComplete btn">
                    <i class="far fa-check-circle fa-2x"></i>
                </button>
            </div>

这将使您的 CSS 和 HTML 更易于理解、调试、测试和维护。

新AngularJS开发商往往没有意识到ng-repeat，ng-switch，ng-view，ng-include和ng-if所有新创建子作用域，因此问题常常显示出来时，这些指令都参与其中。¹

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2021-08-4

我来说两句

0 条评论

登录后参与评论

`ng-scope` 类导致 UI 出现问题

`ng-scope` 类导致 UI 出现问题

样式文件

Linux的官方Adobe Flash存储库是否已过时？

用日期数据透视表和日期顺序查询

应用发明者仅从列表中选择一个随机项一次

Java Eclipse中的错误13，如何解决？

在Windows 7中无法删除文件（2）

在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

套接字无法检测到断开连接

带有错误“ where”条件的查询如何返回结果？

有什么解决方案可以将android设备用作Cast Receiver？

Mac OS X更新后的GRUB 2问题

ggplot：对齐多个分面图-所有大小不同的分面

验证REST API参数

如何从视图一次更新多行（ASP.NET - Core）

尝试反复更改屏幕上按钮的位置 - kotlin android studio

计算数据帧中每行的NA

检索角度选择div的当前值

离子动态工具栏背景色

UITableView的项目向下滚动后更改颜色，然后快速备份

VB.net将2条特定行导出到DataGridView

蓝屏死机没有修复解决方案

通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException