Как проверить условия в angularjs

Question

Я пытаюсь открыть модальное приложение, основанное на конкретном клике, которое должно открыть соответствующий modal.I попытался использовать ng-if и ng-switch, но это не сработало. Так что, пожалуйста, помогите мне .., Спасибо! Вот мой код ..,

<div ng-controller="projectsController"> 

     <ul> 
     <li><a href="#" ng-click='toggleModal()' id="A">Bangalore</a></li> 
     <li><a href="#" ng-click='toggleModal()' id="B">Mangalore</a></li> 
     <li><a href="#" ng-click='toggleModal()' id="C">Mysore</a></li> 
     </ul> 


     <div ng-switch on="id"> 
      <div ng-switch-when="A"> 
       <modal-dialog show='modalShown' width='800px' height='50%'> 
       <p>Modal Content Goes here</p> 
       </modal-dialog> 
      </div> 
      <div ng-switch-when="B"> 
       <modal-dialog show='modalShown' width='800px' height='50%'> 
       <p>Second Modal Content Goes here</p> 
       </modal-dialog> 
      </div> 
     </div> 
</div> 
    /*app.js file*/ 
     myApp.controller('projectsController', ['$scope', function($scope) { 
     $scope.modalShown = false; 
     $scope.toggleModal = function() { 
     $scope.modalShown = !$scope.modalShown; 
     }; 
    }]); 
    //This is my directive in app.js i.e.,both controller and directive are in 
    app.js file 
    myApp.directive('modalDialog', function() { 
     return { 
     restrict: 'E', 
     scope: { 
      show: '=' 
     }, 
     replace: true, 
     transclude: true, 
     link: function(scope, element, attrs) { 
      scope.dialogStyle = {}; 
      if (attrs.width) 
      scope.dialogStyle.width = attrs.width; 
      if (attrs.height) 
      scope.dialogStyle.height = attrs.height; 
      scope.hideModal = function() { 
      scope.show = false; 
      }; 
     }, 
    template: "<div class='ng-modal' ng-show='show'><div class='ng-modal-overlay' ng-click='hideModal()'></div><div class='ng-modal-dialog' ng-style='dialogStyle'><div class='ng-modal-close' ng-click='hideModal()'>X</div><div class='ng-modal-dialog-content' ng-transclude></div></div></div>" 
    }; 
    }); 

Answer 1

Я не уверен, где модальная диалог директива исходит от, но это возможно атрибут шоу в нем ожидает выражение. Вы можете изменить его на:

<modal-dialog show="modalShown === true" width="800px" height="50%">