Javascript $parent不在ng中工作，包括角度

我正在使用

$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>

test.html和testCrl

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

---

之所以发生这种情况，是因为

ng include

/

ng如果创建了一个原型继承的子作用域

让我们从为什么
$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.$parent.addBillDetails
，以获得正确的值。检查。不要在代码中使用
$parent
，这会使代码与html设计和假设紧密结合


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

推荐继续阅读

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>

尝试不使用$parent
ng include
创建子作用域。$parent可以访问父作用域吗？？？是的，但是由于
ng include
子作用域，现在层次结构中有另一个父作用域。所以它将是丑陋的
$parent.$parent
。使用建议的对象below@charlietfl我觉得
controllerAs
是更好的方式，在幕后它使用隐式
点规则
：p
$scope.addBillDetails=true需要模型对象update@charlietfl谢谢你的提醒，伙计，我更新了答案：）
//ng-controller="parentCtrl" `$scope.addBillDetails`
|
|
ng-if
   |
   |- ng-inlcude
      |
      |- ng-controller="testCtrl" ($scope.$parent.$parent.$parent.addBillDetails)

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