Question

在我的应用程序中，我有一个$http.get()请求，将数据存储到数组$scope.requirements中，并将布尔存储到$scope.requirementsFulfilled。

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

问题是当我第一次将结果存储在指令版本中之后我调用$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()的操作，然后获取新的json，如果为true。从这一点来看，只有指令正在更新。

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

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

编辑2 - 调用指令操作的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>

Answer 1

所以这可能会帮助你指明正确的方向。我所做的就是将需求内容提取到自己的服务中。现在你有了一个处理零件处理的单件。当它在一个地方更新时，它随处更新。该指令不再需要其他控制器。

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;
    }
  };
 });

Angular $ scope在更新时未将结果传递给父控制器

1 个答案: