Question

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

的index.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>

controllers.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;

});

Answer 1

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

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

我真的很鼓励你花点时间阅读一些关于角度绑定的文章。您可以here和here开始。在此之后回到您的代码，以了解您做错了什么。：）

数组不传播到视图

1 个答案: