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

Question

我有一个问题，ng-scope css class 导致我的 UI 出现问题。

基本上我希望我的 toDoListRow div 有 70% 的高度。

但是除非我将 ng-scope class 的高度定义为 100%，否则这将不适用被申请;被应用。

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

请查看第一张图片以了解它的外观。

第二张图片是我不对 ng-scope class 或使用 min-height:100%.

应用任何高度时的样子

index.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/popper.js@1.16.0/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>

styles.css

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

Answer 1

请勿将 ng-scope class 用于该目的。

而是定义您自己的 classes：

̶.̶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 都会创建新的子项范围，所以当涉及到这些指令时，问题经常出现。¹

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

`ng-scope` class causing issues with the UI

css

angularjs

angularjs-scope

bootstrap-4

styles.css