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

Angular $scope not passing results to parent controller on update

本文关键字：结果 控制器 scope 更新 Angular      更新时间：2024-06-04

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

我有一个指令，使用与页面相同的控制器。它们都在$scope.requirements上进行ng重复。当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()的操作，如果为true，则获取新的json。从这一点开始，只有指令在更新。

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

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

这是怎么回事？

edit-指令的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>

edit2-Html，它调用指令操作Requirements，并在页面上显示用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>

因此，这可能有助于为您指明正确的方向。我所做的是将需求的东西提取到自己的服务中。现在您有了一个singleton，它可以处理所有与零件有关的事务。当它在一个地方更新时，它在所有地方都更新了。指令不再需要其他控制器。

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;
    }
  };
 });
相关文章：