使用 $scope.apply() 后点击展开不起作用

Question

这是我从 Firestore 获取数据的 Angular 应用程序 我正在使用点击展开数据

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {

  if (queryString.length == 0) {
    if (window.location.search.split('?').length > 1) {
        var params = window.location.search.split('?')[1].split('&');
        for (var i = 0; i < params.length; i++) {
            var key = params[i].split('=')[0];
            var value = decodeURIComponent(params[i].split('=')[1]);
            queryString[key] = value;
            id=queryString["id"];
        }
    }
  }

  db.collection("Wellness")
  .doc(id)
  .get()
  .then(function(doc) {
    if (doc.exists) {
      $scope.records = doc.data();
    } else {
        dismissDialog();
        // doc.data() will be undefined in this case
        console.log("No such document!");
    }

    console.log($scope.records);
    $scope.$apply();

  }).catch(function(error) {
    dismissDialog();
    console.log("Error getting document:", error);
  });

这是我的 HTML 代码

<div ng-controller="myCtrl">
<ul class="accordion accordion-2 accordion--oneopen" style="min-height: 369px;">
                                <li ng-repeat="item in records.details track by $index">
                                    <div class="accordion__title">
                                        <span class="h5">{{item.tittle}}</span>
                                    </div>
                                    <div class="accordion__content">
                                        <span>Your pet will be provided a private, clean and comfortable space which
                                              no other pet can access. Hourly, cleanliness check will be performed.
                                         </span>
                                    </div>
                                </li>
                            </ul>

                            <p>
                                    <label>Select Your City</label>
                                    <select id = "myList">

                                      <option ng-repeat="item in rec.cityNames" value = "{{item.tittle}}">{{item}}</option>

                                    </select>
                                 </p>

                            <style>
                                .collapsible {
                                    background-color: #777;
                                    color: white;
                                    cursor: pointer;
                                    padding: 18px;
                                    width: 100%;
                                    border: none;
                                    text-align: left;
                                    outline: none;
                                    font-size: 15px;
                                }

                                .active, .collapsible:hover {
                                    background-color: #555;
                                }

                                .content {
                                    padding: 0 18px;
                                    display: none;
                                    overflow: hidden;
                                    background-color: #f1f1f1;
                                }
                                </style>


                                <div ng-repeat="item in records.details track by $index">
                                <button class="collapsible">{{item.tittle}}</button>
                                <div class="content">
                                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                </div>
                                </div>

                                <script>
                                var coll = document.getElementsByClassName("collapsible");
                                var i;

                                for (i = 0; i < coll.length; i++) {
                                    coll[i].addEventListener("click", function() {
                                        this.classList.toggle("active");
                                        var content = this.nextElementSibling;
                                        if (content.style.display === "block") {
                                            content.style.display = "none";
                                        } else {
                                            content.style.display = "block";
                                        }
                                    });
                                }
                                </script>


                            </div>

*当我编写硬编码数据时，点击展开功能有效，但是当从 firebase 获取数据并添加 $scope.apply() 然后点击展开不起作用 我已经尝试了许多可能的解决方案，但不起作用请给我一些解决方案 提前致谢

Answer 1

我对你的问题的最佳猜测：

你用这段代码添加点击监听器：

错误

coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
        content.style.display = "none";
    } else {
        content.style.display = "block";
    }
});

这段代码在页面加载时执行，不幸的是，数据库还没有返回结果，因为它是异步的（这就是手动设置模拟数据时它起作用的原因，它们是从一开始就设置的)。所以目前还没有<button class="collapsible">，也没有设置点击监听。

要解决这个问题，这很容易，您必须这样做

改用 AngularJS ng-click。

<div ng-repeat="item in records.details track by $index">
    <button class="collapsible" ng-click="onClick($event)">{{item.tittle}}</button>
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
</div>

并删除 <script> 标签！

在您的控制器中，将您的函数添加到范围：

$scope.onClick = function(e) {
    e.target.classList.toggle("active");
    var content = e.target.nextElementSibling;
    if (content.style.display === "block") {
         content.style.display = "none";
    } else {
        content.style.display = "block";
    }
}

在这里。

你只需要更好地了解 AngularJS 并使用它的特性；）