$parent在 ng-include 角度中不起作用

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变量没有在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.$parent.addBillDetails才能获得正确的值。在此处查看演示。永远不要在代码中使用$parent，这会让你的代码与html设计和假设紧密结合。

---

在这种情况下，最好使用对象(引用类型变量(或使用controllerAs模式，同时使用控制器(控制器作为版本(。

建议阅读"AngularJS中范围原型/原型遗传的细微差别是什么？

目录

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

预览