关于javascript：$ parent不在ng-include angular中工作

$parent not working in ng-include angular

本问题已经有最佳答案，请猛点这里访问。

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

1 2	<button class="btn btn-small" data-ng-if="trItem.skuId==217" data-ng-click="addDetails()">Add Details</button>

1
2
3

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

test.html和testcrl

1 2	<button type="button" class="btn red" data-ng-click="cancel()">Cancel</button> </form>

1
2
3
4

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

相关讨论

这是因为ng-include/ng-if创建了一个典型的继承子范围。

让我们从为什么$parent技巧不适用于您开始，基本上addBillDetails变量没有分配到testCtrl的直接$parent范围。因为views/test.html模板是基于ng-if和ng-include指令组合呈现的。它创建不同的作用域层次结构，请参阅下图。

1
2
3
4
5
6
7
8

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

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

建议阅读"AngularJS中作用域原型/原型继承的细微差别是什么？"

HTML

1
2
3

{{model.addBillDetails}}

<button class="btn btn-small" data-ng-if="trItem.skuId==217" data-ng-click="addDetails()">Add Details</button>

代码

1
2
3
4
5
6
7
8
9
10
11
12
13

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

预览