$父级不在ng中工作-包括角[重复]

Question

我正在使用$scope.$parent更改子控制器中变量的值，但更改并没有反映到其父控制器中。

<div data-ng-if="!addBillDetails">
    <button class="btn btn-small" data-ng-if="trItem.skuId==217"
            data-ng-click="addDetails()">Add Details</button>
</div>
<div data-ng-if="addBillDetails" data-ng-include="'views/test.html'"></div>

$scope.addDetails=function(){
                $scope.addBillDetails=true;
};

html和testCrl

<div data-ng-controller="testCtrl">
<button type="button" class="btn red" data-ng-click="cancel()">Cancel</button>
    </form>
</div>

$scope.cancel=function(){
   alert("cancel");
  $scope.$parent.addBillDetails=false;
};

Answer 1

发生这种情况是因为ng-include/ng-if创建了一个原型继承的子作用域。

让我们从为什么$parent技巧对您不起作用开始，基本上AddBillDetails变量没有在TestCtrl的直接$parent范围内分配。因为views/test.html模板是根据ng-if&ng-include指令组合呈现的。它创建了不同的作用域层次结构，参见下图。

//ng-controller="parentCtrl" `$scope.addBillDetails`
|
|
ng-if
   |
   |- ng-inlcude
      |
      |- ng-controller="testCtrl" ($scope.$parent.$parent.$parent.addBillDetails)

通过查看上图，如果要修改父级TestCtrl的AddBillDetails，则必须使用$scope.$parent.$parent.AddBillDetails以获得正确的值。在这里查看演示。不要在代码中使用$parent，这会使代码与html设计和假设紧密结合。

在这种情况下，首选使用对象（引用类型变量），或者在使用控制器（controllerAs版本）时使用controllerAs模式。

推荐阅读“AngularJS中作用域原型/原型继承的细微差别是什么？”

HTML

{{model.addBillDetails}}
  <div data-ng-if="!model.addBillDetails">
    <button class="btn btn-small" data-ng-if="trItem.skuId==217" data-ng-click="addDetails()">Add Details</button>
  </div>
  <div data-ng-if="model.addBillDetails" data-ng-include="'views/test.html'"></div>

.controller('parentCtrl', function($scope) {
    $scope.model = {};
    $scope.model.addBillDetails = true;
    $scope.addDetails = function() {
      $scope.model.addBillDetails = true;
    };
})
.controller('testCtrl', function($scope) {
    $scope.cancel = function() {
      alert("cancel");
      $scope.model.addBillDetails = false;
    };
})