$parent在ng-include中不起作用，angular。

20 浏览
0 Comments

$parent在ng-include中不起作用，angular。

这个问题已经有答案了：

什么是AngularJS中作用域原型/原型继承的细微差别？

我使用$scope.$parent修改子控制器中的变量值，但父级没有反映出变化。

    


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

test.html和testCrl

 

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

admin 更改状态以发布 2023年5月23日
0

1 答案

0 Comments

这是因为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模式来使用控制器 （controllerAs版本）。

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

Html

{{model.addBillDetails}}

Code

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

预览

0