$父母不在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