Javascript Angular$范围在更新时不将结果传递给父控制器

在我的应用程序中，我有一个

$http.get（）

请求，该请求将数据存储到数组

$scope.requirements

中，并将布尔值存储到

$scope.requirements中

我有一个与页面使用相同控制器的指令。它们都在
$scope.requirements
上重复ng。当requirementsFulfilled为false时，仅显示指令版本，当为true时，仅显示包含页面

问题是当我在第一次使用envoke
$http.get（）
之后，结果只存储在指令版本中。我如何确保此信息绑定到这两者

在控制器内

$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');

页面获取需求并填充页面。然后用户执行触发
checkRequirement（）
的操作，如果为true，则获取新的json。从这一点开始，只有指令在更新

我相信正在为该指令创建子范围，但我不确定到底发生了什么。以下是指令信息的完整性

.directive("operationRequirements", function () {
return {
    restrict: "E",
    templateUrl: "requirements/requirements.html"
    };
});

这是怎么回事

编辑指令的Html

<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>


扫描要求
{{$index+1}}
{{requirement.scanned}}
{{requirement.partId}-{requirement.partDescription}

edit2——调用指令操作需求的Html，以及使用ng show隐藏的需求的页面显示

<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>


{{$index+1}}
{{requirement.partId}-{requirement.partDescription}
因此，这可能会帮助您找到正确的方向。我所做的是将需求内容拉到它自己的服务中。现在您有了一个处理所有与部件相关的事务的单例。当它在一个地方更新时，它在任何地方都会更新。指令不再需要其他控制器


你的HTML是什么样子的？我已经为包含页面和指令添加了HTML。页面上指令的HTML在哪里？@Todd，为什么你的指令没有声明范围变量？@Hoyen看起来他想使用一个“部件”服务，该服务将具有要求和满足的变量。这样，两者都可以使用。
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;
    }
  };
 });