Question

我有一个基于angular1.2和html

构建的angularjs应用程序

当我运行应用程序并在浏览器中查看代码源时，它会公开所有角度内容，例如ng-app，ng-controller和ng-repeat

bellow是我的应用程序的页面源

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="../Scripts/jquery-3.1.1.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!--<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">-->
<script type="text/javascript" src="../Scripts/angular.js"></script>
<script src="../Scripts/AppJS/Routing.js"></script>


<style>
    .selected {
        background-color: lightyellow;
        color: red;
        font-weight: bold;
    }
</style>

</head>
<body ng-app="App" class="jumbotron">
<div ng-controller="MovieController" class="container">
    <div ng-show="success" class="alert-success">Record has been upddated for </div>
    <div class="row col-md-8">
        <table class="table table-striped ">

            <thead class="thead-inverse">
                <tr>
                    <th style="background-color: Highlight">User Name</th>
                    <th style="background-color: Highlight">Name</th>
                    <th style="background-color: Highlight">Email-Id</th>
                    <th style="background-color: Highlight">Contact Number</th>
                    <th style="background-color: Highlight">Actions</th>
                </tr>
            </thead>


            <tr>
                <!-- <td>EmployeeID:</td>-->
                <td>
                    <input type="text" ng-model="movie.title" class="form-control" />

                </td>
                <td>
                    <input type="text" ng-model="movie.year" class="form-control" />
                </td>
                <td>
                    <input type="text" ng-model="movie.rating" class="form-control" />
                </td>
                <td>
                    <input type="text" ng-model="movie.plot" class="form-control" />
                </td>
                <td>
                    <button type="button" class="btn btn-primary">
                        <span class="glyphicon glyphicon-plus"></span>
                    </button>
                </td>
            </tr>
            <tbody>
                <tr ng-repeat="user in users track by user.UserId" ng-class="{'selected':$index == selectedRow}">
                    <td>{{user.UserName}}</td>
                    <td>{{user.FirstName}}&nbsp;{{user.LastName}} </td>
                    <td>{{user.EmailId}}</td>
                    <td>{{user.ContactNumber}}</td>

                    <td class="row">
                        <span class="">
                            <i class="btn btn-warning glyphicon glyphicon-pencil" style="padding:0px" title="Edit {{user.UserName}}"></i>&nbsp;

                            <i class="btn btn-danger glyphicon glyphicon-remove"  style="padding:0px" title="Delete{{user.UserName}}"></i>
                        </span>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
</body>
</html>

我需要在控制台（inspect元素）中隐藏这些元素并查看页面源代码。我怎么能实现它？

甚至在js中暴露角度控制器。有没有办法最小化或捆绑这些角度脚本？

在浏览器的视图源中隐藏ng-元素

0 个答案: