如何使用Angular.js根據特定條件加載控制器

Question

我面臨一些問題。 我在一個父控制器中有一個嵌套的控制器，我需要它根據某些條件使用Angular.js執行。 我在下面解釋我的代碼。

NABH.html：

<div ng-controller=NABHParentController>
    <div ng-show="showNabh">
       <div ng-include="'nabh1.html'"></div>
    </div>
    <div ng-show="showNabh1">
       <div ng-include="'nabh2.html'"></div>
    </div>
</div>

nabh1.html：

<div class="right_panel" style="display:block;" id="auditnabh" ng-controller="NABHController">
 <td class="sticky-cell" ng-click="initiateNABH(nabh.NABHAuditID)">

</td>
</div>

nabh2.html：

<div class="right_panel" ng-controller="NABH2Controller">
   <h2 class="page-title">NABH (INT012017001)</h2>
<div>

NABHParentController.js：

var app=angular.module('demo');
app.controller('NABHParentController',function($scope,$http,$state,$window,$location,$filter){
   $scope.showNabh=true;
   $scope.showNabh1=false;
})

NABHController.js：

var app=angular.module('demo');
app.controller('NABHController',function($scope,$http,$state,$window,$location,$filter,getBothIdToAuditDetailPage)
{
    $scope.initiateNABH = function(aid) {
        $scope.$parent.$parent.showNabh=false;
        $scope.$parent.$parent.showNabh1=true;
    }
})

最初，所有控制器都在此處加載，並且nabh1.html顯示nabh1.html 。 當用戶單擊該td click event將顯示第二部分html。 在這里，我需要用戶何時單擊該ng-click="initiateNABH(nabh.NABHAuditID)" ，第二個視圖將打開，相應的控制器將開始執行。 最初僅執行與視圖相關的控制器。 請幫忙。

Answer 1

聽起來使用ng-if代替ng-show可以解決您的問題：

<div ng-if="showNabh">
   <div ng-include="'nabh1.html'"></div>
</div>
<div ng-if="showNabh1">
   <div ng-include="'nabh2.html'"></div>
</div>

區別在於，當表達式為假時，ng-show將“僅”使用css隱藏元素，但如果表達式為假，則ng-if不會創建該元素，因此，只有在ng-if成立之前，它才會啟動控制器。

另外，我可能會將InitialNABH函數移到父控制器-它仍將在子控制器中可用，但由於不必使用$ parent，因此使代碼中斷的可能性較小：

var app=angular.module('demo');
app.controller('NABHParentController',function($scope,$http,$state,$window,$location,$filter){
   $scope.showNabh=true;
   $scope.showNabh1=false;

   $scope.initiateNABH = function(aid) {
       $scope.showNabh=false;
       $scope.showNabh1=true;
   }
})