数组未传播到视图

我对Angularjs和Firebase很陌生，并且已经坚持了很长一段时间。我正在尝试使用 ng-repeat 来迭代我在控制器中设置的一系列过程。我可以在控制器中打印$scope.procedures，但不能在index.html中打印。知道我哪里出错了吗？

索引.html

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
  <head>
    <meta charset="utf-8">
    <!-- Angular JS -->
    <script src="lib/angular/angular.min.js"></script>
    <!-- Firebase -->
    <script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
    <script src="js/controllers.js"></script>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <div class="container-fluid" id="logo">
    </div>
    <div class="container" ng-controller="MainCtrl">
      <div class="col-sm-7 col-md-6 col-md-offset-1" id="message">
        <label id="input-label">Insurance Company</label>
        <input ng-model="insurQuery" class="form-control insurInput" id="input-box" placeholder="Patient Insurance Company" autofocus>
        <div ng-if="showProcedures()">
          <h3>Procedures Covered by <span id="proc-span">{{selectedInsur.name}}</span></h3>
          <ul class="list-group">
            <li class="list-group-item" ng-repeat="proc in procedures">
            <a>{{ proc.name }}</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="col-sm-4 col-md-4 col-md-offset-1" id="message2">
        <ul class="list-group">
          <li class="list-group-item ng-class: {'active':isSelectedInsur(company)}" ng-repeat="company in insuranceCompanies | filter: insurQuery | orderBy: 'name'">
            <a href="#" ng-click="setSelectedInsur(company)">{{ company.name }}</a>
          </li>
        </ul>
      </div>
    </div>
  </body>
</html>

控制器.js

var myApp = angular.module('myApp', ['ui.bootstrap', 'firebase']);
myApp.controller("MainCtrl", function($scope, $firebaseArray) {
  var ref = new Firebase("https://payoralerts.firebaseio.com/companies");
  // download the data into a local object
  $scope.insuranceCompanies = $firebaseArray(ref);
  $scope.selectedInsur = null;
  $scope.isSelected = false;
  $scope.procedures = [];
  function getProcedures() {
    var companiesBaseUrl = "https://payoralerts.firebaseio.com/companies/" 
    var proceduresBaseRef = new Firebase("https://payoralerts.firebaseio.com/procedures/");
    var companyUrl = companiesBaseUrl + $scope.selectedInsur.$id + "/procedures/";
    var proceduresUrl = "https://payoralerts.firebaseio.com/procedures/"
    var companyProceduresRef = new Firebase(companyUrl);
    companyProceduresRef.on("child_added", function(snap) {
        proceduresBaseRef.child(snap.key()).once("value", function(data) {
            if (data.val()) {
                console.log("Name: ", data.val().name);
                $scope.procedures.push(data.val());
                console.log("scope procedures: ", $scope.procedures);
            }; 
        });
    });
  }
  function setSelectedInsur(company) {
    if ($scope.selectedInsur == company) {
        $scope.selectedInsur = null;
        $scope.isSelected = null;
    } else {
        $scope.selectedInsur = company;
        $scope.isSelected = true;
        getProcedures();
        console.log("scope procedures: ", $scope.procedures);
    }
  }
  function isSelectedInsur(company) {
    return $scope.selectedInsur !== null && company.name == $scope.selectedInsur.name;
  }
  function showProcedures() {
    if ($scope.isSelected == true) {
        return true;
    } else {
        return false;
    }
  }
  $scope.setSelectedInsur = setSelectedInsur;
  $scope.isSelectedInsur = isSelectedInsur;
  $scope.showProcedures = showProcedures;
  // $scope.procedures = $scope.procedures;
});

我对 Angular 也很陌生，角度（imo）中最深入和最难的主题之一是角度绑定如何在引擎盖下工作。

在您的情况下，调用$scope.$apply()有效，但请记住，这不是最佳解决方案，并且您不应该在遇到绑定问题时开始调用它。

我真的鼓励你花一些时间阅读一些关于角度绑定是什么的文章。你可以从这里和这里开始。在此之后，回到您的代码以了解您做错了什么。:)

相关内容

最新更新

热门标签：