Pietro Fragnito Pietro Fragnito - 5 months ago 24
HTML Question

Ng-if not working

I have this (partial) view with its controller: my goal is to insert/remove the two subview (ADR and MDR) programmatically.

I studied ng-if directive and I tried to apply it in my test but seems not working well cause the views are not showed when I click on the link.

Any helps?

Thanks!



drfmControllers.controller('functionalitiesHandler', ['$scope',

function ($scope) {


$scope.setMDRFunction = function() {
clearAll();
$scope.MDR = true;
console.log("MDR "+$scope.MDR);
}

$scope.setADRFunction = function() {
clearAll();
$scope.ADR = true;
console.log("ADR "+ $scope.ADR);
}

function clearAll(){
$scope.MDR = false;
$scope.ADR = false;
}
}
]);

<div class="container-fluid">
<div class="row content">
<div class="col-sm-3 sidenav hidden-xs">
<h2>DRFM Cockpit</h2>
<ul class="nav nav-pills nav-stacked">
<li><a ng-controller="functionalitiesHandler" ng-click="setMDRFunction()" >MDR</a></li>
<li><a ng-controller="functionalitiesHandler" ng-click="setADRFunction()" >ADR</a></li>

</ul>
<br>
</div>
<br>

<div class="col-sm-9">
<div ng-if="MDR">
<h1>Test 1</h1>
<p>Test 1</p>
<hr>
</div>
<div ng-if="ADR">
<h1>Test 2</h1>
<p>Test 2</p>
<hr>
</div>
</div>
</div>
</div>




Answer

Your ng-controller attribute needs to be declared on a common ancestor of all the elements that rely on its $scope. You have it declared twice, on the two <li> elements (which, incidentally, will create two different controller instances). Try moving it up to the <div class="row content"> element.