使用$ scope.apply（）后，单击以展开不起作用

Question

这是我的Angular应用，我正在其中从Firestore提取数据 我正在使用click展开数据

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

这段代码是在页面加载时执行的，不幸的是，DB尚未返回结果，因为它是异步的（这就是为什么当您手动设置模拟数据时它会起作用的原因，因此它们是从一开始就设置的） ）。因此，目前还没有<button class="collapsible">，也没有设置点击侦听器。

要解决此问题，这很容易，您必须

INSTEAD使用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并使用其功能;）