按钮单击时的模态不显示

Question

尝试在单击按钮时启动模式。 我可以 console.log “单击按钮”，但模式不会显示。 请帮我找出哪里出错了。 一直在寻找一段时间，但我以某种方式忽略了错误。 谢谢你。

完整代码可以在这个 Codepen 中找到： https://codepen.io/centem/pen/BaajLZm

 var app = angular.module('myApp', []); app.controller('myController', function ($scope, $http) { $scope.list = [ { "ID": "001", "Name": "Eurasian Collared-Dove", "Type": "Dove" }, { "ID": "002", "Name": "Bald Eagle", "Type": "Hawk" }, { "ID": "003", "Name": "Cooper's Hawk", "Type": "Hawk" }, { "ID": "004", "Name": "Bell's Sparrow", "Type": "Sparrow" }, { "ID": "005", "Name": "Mourning Dove", "Type": "Dove" }, { "ID": "006", "Name": "Rock Pigeon", "Type": "Dove" }, { "ID": "007", "Name": "Abert's Towhee", "Type": "Sparrow" }, { "ID": "008", "Name": "Brewer's Sparrow", "Type": "Sparrow" }, { "ID": "009", "Name": "Canyon Towhee", "Type": "Sparrow" }, { "ID": "010", "Name": "Black Vulture", "Type": "Hawk" }, { "ID": "011", "Name": "Eurasian Collared-Dove", "Type": "Dove" }, { "ID": "012", "Name": "Bald Eagle", "Type": "Hawk" }, { "ID": "013", "Name": "Cooper's Hawk", "Type": "Hawk" }, { "ID": "014", "Name": "Bell's Sparrow", "Type": "Sparrow" }, { "ID": "015", "Name": "Mourning Dove", "Type": "Dove" }, { "ID": "016", "Name": "Rock Pigeon", "Type": "Dove" }, { "ID": "017", "Name": "Abert's Towhee", "Type": "Sparrow" }, { "ID": "018", "Name": "Brewer's Sparrow", "Type": "Sparrow" }, { "ID": "019", "Name": "Canyon Towhee", "Type": "Sparrow" }, { "ID": "020", "Name": "Black Vulture", "Type": "Hawk" }, { "ID": "021", "Name": "Eurasian Collared-Dove", "Type": "Dove" }, { "ID": "022", "Name": "Bald Eagle", "Type": "Hawk" }, { "ID": "023", "Name": "Cooper's Hawk", "Type": "Hawk" }, { "ID": "024", "Name": "Bell's Sparrow", "Type": "Sparrow" }, { "ID": "025", "Name": "Mourning Dove", "Type": "Dove" }, { "ID": "026", "Name": "Rock Pigeon", "Type": "Dove" }, { "ID": "027", "Name": "Abert's Towhee", "Type": "Sparrow" }, { "ID": "028", "Name": "Brewer's Sparrow", "Type": "Sparrow" }, { "ID": "029", "Name": "Canyon Towhee", "Type": "Sparrow" }, { "ID": "030", "Name": "Black Vulture", "Type": "Hawk" } ]; $scope.count = $scope.list.length; $scope.reverseOrder = true; $scope.sortField = 'ID'; $scope.sortBy = function(sortField) { $scope.reverseOrder = ($scope.sortField === sortField)? .$scope:reverseOrder; false. $scope;sortField = sortField; }; }). // Get the modal var modal = document;getElementById('myModal'). // Get the button that opens the modal var btn = document;getElementById("myBtn"). // Get the <span> element that closes the modal var span = document;getElementsByClassName("close")[0], // When the user clicks the button. open the modal btn.onclick = function() { modal.style;display = "block", } // When the user clicks on <span> (x). close the modal span.onclick = function() { modal.style;display = "none", } // When the user clicks anywhere outside of the modal. close it window.onclick = function(event) { console;log("button clicked"). if (event.target == modal) { modal.style;display = "none"; } }

 body { margin: 0 auto; } a { text-decoration: none; } nav { font-family: monospace; width: 100%; margin: auto; display: flex; /*justify-content: center;*/ justify-content: space-between; background: rgb(67, 66, 66); align-items: center; } ul { background: rgb(67, 66, 66); list-style: none; margin: 0; padding-left: 0; } li { color: #fff; background: rgb(67, 66, 66); display: block; float: left; padding: 1rem; position: relative; text-decoration: none; transition-duration: 0.3s; width: 70px; } li a { color: #fff; } li:hover, li:focus-within { background: rgb(0,0,0); cursor: pointer; } li:focus-within a { outline: none; } ul li ul { background: rgb(67, 66, 66); visibility: hidden; opacity: 0; min-width: 5rem; position: absolute; transition: all 0.3s ease; margin-top: 1rem; left: 0; display: none; } ul li:hover > ul, ul li:focus-within > ul, ul li ul:hover, ul li ul:focus { visibility: visible; opacity: 1; display: block } ul li ul li { clear: both; width: 100%; } section { width: 90%; margin: auto; margin-top: 50px; display: block; border: 1px solid black; min-height: 400px; max-height: 700px; overflow: auto; }.section-header { border-bottom: 1px solid black; padding: 5px; background-color: #7C9DB9; }.section-header > div { display: inline-block; }.section-header div:nth-child(3) { color: red; float: right; }.content { padding: 5px; } #company-name { float: left; vertical-align: middle; }.logo { float: right; vertical-align: middle; } img { height: 40px; vertical-align: middle; } footer { font-family: monospace; width: 100%; margin: auto; display: flex; /*justify-content: center;*/ justify-content: space-between; background: rgb(67, 66, 66); align-items: center; } tr:nth-child(even) {background: #CCC} tr:nth-child(odd) {background: #FFF}.modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } /* Modal Content */.modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%; } /* The Close Button */.close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; }.close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; } span { color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> <nav> <img id="company-name" src="https://i.imgur.com/MOBXeoA.jpg"> <ul> <li><a href="#">One</a></li> <li><a href="#">Two</a> <ul> <li href="#">One</li> <li href="#">Two</li> </ul> </li> <li><a href="#">Three</a> <ul> <li href="#">One</li> <li href="#">Two</li> <li href="#">Three</li> </ul> </li> <li><a href="#">Four</a></li> <li><a href="#">Five</a></li> </ul><span> <img class="logo" src="https://i.imgur.com/ITht7Gc.jpg"> <img class="logo" src="https://i.imgur.com/qNV0oMX.jpg"> </span> </nav> <section ng-app="myApp" ng-controller="myController"> <div class="section-header"> <div>One</div> <div>Two</div> <div>Count: {{list.length}}</div> </div> <div class="content"> <label>Search: <input ng-model="searchText"></label> <table id="searchTextResults"> <tr> <th ng-click="sortBy('ID')">ID</th> <th ng-click="sortBy('Name')">Bird Name</th> <th ng-click="sortBy('Type')">Type of Bird</th> </tr> <tr ng-repeat="birds in list | filter:searchText | orderBy:sortField:reverseOrder"> <td><a href="#">{{birds.ID}}</a></td> <td><a href="#">{{birds.Name}}</a></td> <td><a href="#">{{birds.Type}}</a></td> <td><button id="myBtn">Edit</button></td> </tr> </table> </div> </section> <;-- <footer> <ul> <li>One</li> <li>Two</li> <li>Three</li> </ul> </footer>--> <.-- The Modal --> <div id="myModal" class="modal"> <.-- Modal content --> <div class="modal-content"> <span class="close">&times;</span> <p>Some text in the Modal..</p> </div> </div>

Answer 1

好的，首先 Edit 按钮位于ng-repeat内，它将创建这么多按钮，并且所有按钮都具有相同的 ID，这是无效的，因为每个元素都必须具有唯一的id 。

其次，在 angulars 的上下文中创建的按钮对于getElementById是不可访问的，因为它甚至在呈现按钮之前就已执行。 当您button clicked时，function 绑定到 window 因此它会记录。 下面是一个可以正常工作的示例代码。 只需在 controller 中创建一个 function 即可打开模态。 下面是一个工作示例。

 var app = angular.module('myApp', []); app.controller('myController', function($scope, $http) { $scope.list = [{ "ID": "001", "Name": "Eurasian Collared-Dove", "Type": "Dove" }, { "ID": "002", "Name": "Bald Eagle", "Type": "Hawk" }, { "ID": "003", "Name": "Cooper's Hawk", "Type": "Hawk" }, { "ID": "004", "Name": "Bell's Sparrow", "Type": "Sparrow" }, { "ID": "005", "Name": "Mourning Dove", "Type": "Dove" }, { "ID": "006", "Name": "Rock Pigeon", "Type": "Dove" }, { "ID": "007", "Name": "Abert's Towhee", "Type": "Sparrow" }, { "ID": "008", "Name": "Brewer's Sparrow", "Type": "Sparrow" }, { "ID": "009", "Name": "Canyon Towhee", "Type": "Sparrow" }, { "ID": "010", "Name": "Black Vulture", "Type": "Hawk" }, { "ID": "011", "Name": "Eurasian Collared-Dove", "Type": "Dove" }, { "ID": "012", "Name": "Bald Eagle", "Type": "Hawk" }, { "ID": "013", "Name": "Cooper's Hawk", "Type": "Hawk" }, { "ID": "014", "Name": "Bell's Sparrow", "Type": "Sparrow" }, { "ID": "015", "Name": "Mourning Dove", "Type": "Dove" }, { "ID": "016", "Name": "Rock Pigeon", "Type": "Dove" }, { "ID": "017", "Name": "Abert's Towhee", "Type": "Sparrow" }, { "ID": "018", "Name": "Brewer's Sparrow", "Type": "Sparrow" }, { "ID": "019", "Name": "Canyon Towhee", "Type": "Sparrow" }, { "ID": "020", "Name": "Black Vulture", "Type": "Hawk" }, { "ID": "021", "Name": "Eurasian Collared-Dove", "Type": "Dove" }, { "ID": "022", "Name": "Bald Eagle", "Type": "Hawk" }, { "ID": "023", "Name": "Cooper's Hawk", "Type": "Hawk" }, { "ID": "024", "Name": "Bell's Sparrow", "Type": "Sparrow" }, { "ID": "025", "Name": "Mourning Dove", "Type": "Dove" }, { "ID": "026", "Name": "Rock Pigeon", "Type": "Dove" }, { "ID": "027", "Name": "Abert's Towhee", "Type": "Sparrow" }, { "ID": "028", "Name": "Brewer's Sparrow", "Type": "Sparrow" }, { "ID": "029", "Name": "Canyon Towhee", "Type": "Sparrow" }, { "ID": "030", "Name": "Black Vulture", "Type": "Hawk" } ]; $scope.count = $scope.list.length; $scope.reverseOrder = true; $scope.sortField = 'ID'; $scope.sortBy = function(sortField) { $scope.reverseOrder = ($scope.sortField === sortField)? .$scope:reverseOrder; false. $scope;sortField = sortField; }. $scope.openModal = function() { debugger modal.style;display = "block"; } }). // Get the modal var modal = document;getElementById('myModal'). // Get the <span> element that closes the modal var span = document;getElementsByClassName("close")[0], // When the user clicks the button, open the modal // When the user clicks on <span> (x). close the modal span.onclick = function() { modal.style;display = "none", } // When the user clicks anywhere outside of the modal. close it window.onclick = function(event) { console;log("button clicked"). if (event.target == modal) { modal.style;display = "none"; } }

 body { margin: 0 auto; } a { text-decoration: none; } nav { font-family: monospace; width: 100%; margin: auto; display: flex; /*justify-content: center;*/ justify-content: space-between; background: rgb(67, 66, 66); align-items: center; } ul { background: rgb(67, 66, 66); list-style: none; margin: 0; padding-left: 0; } li { color: #fff; background: rgb(67, 66, 66); display: block; float: left; padding: 1rem; position: relative; text-decoration: none; transition-duration: 0.3s; width: 70px; } li a { color: #fff; } li:hover, li:focus-within { background: rgb(0, 0, 0); cursor: pointer; } li:focus-within a { outline: none; } ul li ul { background: rgb(67, 66, 66); visibility: hidden; opacity: 0; min-width: 5rem; position: absolute; transition: all 0.3s ease; margin-top: 1rem; left: 0; display: none; } ul li:hover>ul, ul li:focus-within>ul, ul li ul:hover, ul li ul:focus { visibility: visible; opacity: 1; display: block } ul li ul li { clear: both; width: 100%; } section { width: 90%; margin: auto; margin-top: 50px; display: block; border: 1px solid black; min-height: 400px; max-height: 700px; overflow: auto; }.section-header { border-bottom: 1px solid black; padding: 5px; background-color: #7C9DB9; }.section-header>div { display: inline-block; }.section-header div:nth-child(3) { color: red; float: right; }.content { padding: 5px; } #company-name { float: left; vertical-align: middle; }.logo { float: right; vertical-align: middle; } img { height: 40px; vertical-align: middle; } footer { font-family: monospace; width: 100%; margin: auto; display: flex; /*justify-content: center;*/ justify-content: space-between; background: rgb(67, 66, 66); align-items: center; } tr:nth-child(even) { background: #CCC } tr:nth-child(odd) { background: #FFF }.modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0, 0, 0); /* Fallback color */ background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */ } /* Modal Content */.modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%; } /* The Close Button */.close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; }.close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; } span { color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.4/angular.min.js"></script> <nav> <img id="company-name" src="https://i.imgur.com/MOBXeoA.jpg"> <ul> <li><a href="#">One</a></li> <li><a href="#">Two</a> <ul> <li href="#">One</li> <li href="#">Two</li> </ul> </li> <li><a href="#">Three</a> <ul> <li href="#">One</li> <li href="#">Two</li> <li href="#">Three</li> </ul> </li> <li><a href="#">Four</a></li> <li><a href="#">Five</a></li> </ul><span> <img class="logo" src="https://i.imgur.com/ITht7Gc.jpg"> <img class="logo" src="https://i.imgur.com/qNV0oMX.jpg"> </span> </nav> <section ng-app="myApp" ng-controller="myController"> <div class="section-header"> <div>One</div> <div>Two</div> <div>Count: {{list.length}}</div> </div> <div class="content"> <label>Search: <input ng-model="searchText"></label> <table id="searchTextResults"> <tr> <th ng-click="sortBy('ID')">ID</th> <th ng-click="sortBy('Name')">Bird Name</th> <th ng-click="sortBy('Type')">Type of Bird</th> </tr> <tr ng-repeat="birds in list | filter:searchText | orderBy:sortField:reverseOrder"> <td><a href="#">{{birds.ID}}</a></td> <td><a href="#">{{birds.Name}}</a></td> <td><a href="#">{{birds.Type}}</a></td> <td><button ng-click="openModal()" class="myBtn">Edit</button></td> </tr> </table> </div> </section> <;-- <footer> <ul> <li>One</li> <li>Two</li> <li>Three</li> </ul> </footer>--> <.-- The Modal --> <div id="myModal" class="modal"> <.-- Modal content --> <div class="modal-content"> <span class="close">&times;</span> <p>Some text in the Modal..</p> </div> </div>

希望这可以帮助：）