$父母不在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创建prototypically继承子范围。

让我们为什么$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得到正确值的保持。检查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