Question

我需要在按钮click中显示一个模型弹出窗口。任何人都建议在没有BootstrpJS的情况下在angularjs中实现这个的最佳方法吗？

我尝试了下面的操作并且无法正常工作。：（

HTML

    <div>
      <button ng-click='toggleModal()'>Add Dataset</button>
        <modal-dialog info='modalShown' show='modalShown' width='400px'     height='60%'>
            <p>Modal Content Goes here</p>

  </modal-dialog>
    </div>

控制器

app.controller('DataController', function ($scope,$http) {

    $scope.showModal = false;
    $scope.toggleModal = function () {
        $scope.showModal = !$scope.showModal;
    };


 $http.get("/api/product").then(function (responses) {
        $scope.ProductData = responses.data;
               });
.......
........
});

app.directive('modalDialog', function () {
    return {
        restrict: 'E',
        scope: {
            show: '=info'
        },
        replace: true, // Replace with the template below
        transclude: true, // we want to insert custom content inside the directive
        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

制定指令。然后将其包含在您的控制器中。

请参阅：https://docs.angularjs.org/guide/directive

Answer 2

看起来你的范围太乱了。如果您查看http://codepen.io/dboots/pen/vLeXPj，我会使用相同的$scope.showModal变量和相同的$scope.toggleModal函数来显示/隐藏。

angular.module('testApp', [])
  .controller('DataController', function($scope) {
    $scope.showModal = false;
    $scope.toggleModal = function() {
      $scope.showModal = !$scope.showModal;
    };
  })
  .directive('modalDialog', function() {
    return {
      restrict: 'E',
      replace: true, // Replace with the template below
      transclude: true, // we want to insert custom content inside the directive
      link: function(scope, element, attrs) {
        scope.dialogStyle = {};
        if (attrs.width)
          scope.dialogStyle.width = attrs.width;
        if (attrs.height)
          scope.dialogStyle.height = attrs.height;
      },
      template: "<div class='ng-modal' ng-show='showModal'><div class='ng-modal-overlay' ng-click='toggleModal()'></div><div class='ng-modal-dialog' ng-style='dialogStyle'><div class='ng-modal-close' ng-click='toggleModal()'>X</div><div class='ng-modal-dialog-content' ng-transclude></div></div></div>"

    };
  });

如何使用angularJS显示modelpopup窗口？

2 个答案: