Angular $ Scope übergibt keine Ergebnisse an übergeordneten Controller auf Update

Question

In meiner App habe ich eine $http.get() Anfrage, die Daten in das Array $scope.requirements und einen booleschen in $scope.requirementsFulfilled speichert.

Ich habe eine Direktive mit dem gleichen Controller wie die Seite. Beide machen eine ng-Wiederholung auf der $scope.requirements. Wenn das Erforderliche Attribut erfüllt ist, wird nur die Version der Direktive angezeigt, wenn nur die umgebende Seite wahr ist.

Das Problem ist, wenn ich nach dem ersten Mal $http.get() envoke die Ergebnisse nur in der Direktive-Version gespeichert werden. Wie stelle ich sicher, dass diese Informationen an beide gebunden sind?

Im Controller ...

$scope.requirementsFulfilled; 
$scope.requirements = []; 

$scope.getRequirements = function(url) { 
    $http.get(url) 
    .then(function(res){ 
     $scope.requirements = res.data.requirements; 
     $scope.setFulfilled(res.data.fulfilled);    
    }); 
    }; 

$scope.submitRequirementScan = function() { 
    if ($scope.checkRequirement()) { 
     $scope.getRequirements('tempjson/requiredPartsFulfilled.json'); 
    } 
    }; 

$scope.setFulfilled = function(inputFulfilled) { 
    $scope.requirementsFulfilled = inputFulfilled; 
    }; 

$scope.getRequirements('tempjson/requiredParts.json'); 

Die Seite bekommt die Anforderungen und füllt die Seite. Dann führt der Benutzer Aktionen aus, die checkRequirement() auslöst und dann den neuen JSON abruft, falls er wahr ist. Ab diesem Zeitpunkt wird nur die Direktive aktualisiert.

Ich glaube, dass ein Kind Bereich für die Richtlinie erstellt wird, aber ich bin mir nicht sicher, was genau passiert. Hier ist die Gesamtheit der Richtlinie Info.

Was ist damit los?

bearbeiten - HTML für die Richtlinie

<div class="col-md-6 col-md-offset-3"> 
    <h5>Scan Requirements</h5> 
    <form ng-submit="submitRequirementScan()" ng-controller="operationCtrl"> 
     <label> <div class="glyphicon glyphicon-barcode ng-hide" ng-hide="requirement.scanned"></div> 
     <input type="text" ng-model="text" name="text" placeholder="Scan Barcode" autofocus /></label> 
     <input type="submit" id="submit" value="Submit Scan" class="btn" /> 
    <table class="table table-hover"> 
     <tr ng-repeat="requirement in requirements | filter : unScannedFilter"> 
      <td>{{$index + 1 }}</td> 
      <td> 
       <div class="glyphicon glyphicon-barcode ng-hide" ng-hide="requirement.scanned"></div> 
       <div class="glyphicon glyphicon-check ng-show" ng-show="requirement.scanned"></div>{{requirement.scanned}}  
       <div class="col-md-4"> 
        <input type="checkbox" ng-model="requirement.scanned"> 
       </div> 
      </td> 
      <td>{{requirement.partId}} - {{requirement.partDescription}}</td> 
     </tr> 
    </table> 
    </form> 
</div> 

bearbeiten 2 - HTML, die die Richtlinie operations Anforderungen und die Seite mit der ng-Show versteckt Anzeige der Anforderungen aufruft.

<div class="row" ng-hide="requirementsFulfilled" > 
    <operation-Requirements></operation-Requirements> 
</div> 
<div class="col-md-12" ng-show="requirementsFulfilled"> 
     <table class="table table-hover"> 
      <tr ng-repeat="requirement in requirements"> 
       <td>{{$index + 1 }}</td> 
       <td> 
        <div class="glyphicon glyphicon-barcode ng-hide" ng-hide="requirement.scanned"></div> 
        <div class="glyphicon glyphicon-check ng-show" ng-show="requirement.scanned"></div> 
       </td> 
       <td>{{requirement.partId}} - {{requirement.partDescription}}</td> 
      </tr> 
     </table> 
</div> 

Answer 1

Also vielleicht wird dies helfen, weisen Sie in die richtige Richtung. Was ich getan habe, ist, die Anforderungen in seinen eigenen Dienst zu ziehen. Jetzt haben Sie ein Singleton, das alles behandelt, was mit Teilen zu tun hat. Wenn es an einem Ort aktualisiert wird, wird es überall aktualisiert. Die Richtlinie benötigt diesen anderen Controller nicht mehr.

http://plnkr.co/edit/Nej79OI3NrKcrkMNix3D?p=preview

app.service('partsService', function() { 
    return { 
requirementsFulfilled: false, 
requirements: [], 
getRequirements: function() { 
    this.requirements.push({partId: 1, partDescription: 'Some Desc', scanned: false}); 
    this.requirements.push({partId: 2, partDescription: 'Some Desc 2', scanned: true}); 
}, 
submitScan: function (id) { 
    this.requirements.filter(function (part) { 
    return part.partId === id; 
    }).map(function (part) { 
    part.scanned = true; 
    }); 

    this.requirementsFulfilled = this.requirements.filter(function (part) {   return !part.scanned }).length === 0; 
    } 
    }; 
});