Ng-if not working

Question

У меня есть это (частичное) представление с его контроллером: моя цель состоит в том, чтобы программно вставить/удалить два подпрограммы (ADR и MDR).

Я изучил директиву ng-if, и я попытался применить его в своем тесте, но, похоже, не работает, потому что представления не отображаются, когда я нажимаю на ссылку.

Любые помощь?

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 1

Ваш атрибут ng-controller должен быть объявлен на общего предка всех элементов, которые полагаются на его $ объеме. Вы его дважды объявили, на двух элементах <li> (которые, кстати, создадут два разных экземпляра контроллера). Попробуйте переместить его на элемент <div class="row content">.

Answer 2

Вы не устанавливаете контроллер для всего html, чтобы он не получал MDR и ADRng-if значения.

Вы можете обработать его, добавив ng-controller во внешний div и удалив из вашего списка.

<div class="container-fluid" ng-controller="functionalitiesHandler"> 

Работа jsFiddle для демонстрации.

Answer 3

ng-controller = "functionalitiesHandler" должен быть объявлен в родительском div всех div, где вы ссылаетесь на код с этого контроллера. например в этом div:
div class = "container-fluid" ng-controller = "functionsitiesHandler"