ngScope类导致UI问题

问题描述 投票：0回答：1

我遇到一个问题，即ng-scope css类导致UI出现问题。

基本上，我希望toDoListRow div的高度为70％。

但是除非我将ng-scope类定义为具有100％的高度，否则这将不适用，问题在于，每当应用新范围时，它都会导致意外行为。

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

请参见第一张图片，看起来应该是什么样。

enter image description here

第二张图片是我不对ng-scope类应用任何高度或使用min-height：100％时的外观。

enter image description here

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

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;
}
css angularjs bootstrap-4 angularjs-scope
1个回答
0
投票
而不是定义您自己的类：

̶.̶n̶g̶-̶s̶c̶o̶p̶e̶ ̶{̶ .toDoList { min-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都创建了新的子作用域，因此当涉及这些指令时，常常会出现问题。 C0]
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.