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首先显示。当用户点击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只会＆＃34;当表达式为假时，使用css隐藏元素，如果它是假的，则ng-if不会创建元素，因此在ng-if为真的情况下不会启动控制器。

另外，我可能会将initiateNABH函数移动到父控制器 - 它仍然可以在子控制器中使用但是由于你不必使用$ 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;
   }
})

如何使用Angular.js根据特定条件加载控制器

1 个答案: