Question

我正在尝试在我的应用程序中打开一个模态，基于特定的点击它应该打开相应的模态。我尝试了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

我不确定模态对话框指令的来源，但是它的show属性可能需要一个表达式。您可能希望将其更改为：

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

如何检查angularjs中的条件

1 个答案: