$parent 在 ng-include Angular 中不起作用 [重复]

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

test.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 变量没有在$parent 的testCtrl 范围内立即分配。由于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.$parent.addBillDetails 才能获得正确的值。检查demo here。 切勿在您的代码中使用$parent，这会使您的代码紧密结合 html 设计和假设。

---

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

推荐阅读"What are the nuances of scope prototypal / prototypical inheritance in 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;
    };
})

Preview