배열이 전파되지 않음

저는 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; 

});

출처

2016-06-14 steph

'showProcedures()'가 true를 반환하고 있습니까? – adolfosrs

예, 진실입니다. 'showProcedures()'바로 다음의 제목이 출력되지만'ng-repeat'의 목록에 아무 것도 나타나지 않습니다. @adolfosrs – steph

배열 푸시 직후에'$ scope. $ apply()'를 호출하면 어떻게됩니까? – adolfosrs

나는 또한 해요뿐만 아니라 각도 꽤 새로운 각도에서 가장 깊고 어려운 항목 중 하나 (imo)는 후드 아래에서 각 바인딩이 작동하는 방식입니다.

귀하의 경우에는 $scope.$apply()으로 전화를 걸어야합니다. 그러나 이것이 최선의 해결책은 아니므로 제본 문제가있을 때마다 전화를해서는 안됩니다.

나는 각도 바인딩이 실제로 무엇인지에 대해 몇 가지 기사를 읽는 것이 좋습니다. here 및 here을 시작할 수 있습니다. 그 후에 당신이 잘못하고있는 것을 이해하기 위해 당신의 코드로 돌아 가라. :)

출처

2016-06-14 22:13:05 adolfosrs

고맙습니다. 정말 그 기사를 읽을 것입니다. 매우 감사! – steph

배열이 전파되지 않음

답변

관련 문제