Question

我想要模态表单弹出窗口，但它没有出现。当我做检查元素它说$（...）模态不是一个函数。控制器：

AuthService.createAdmin(data, function (response) {
    if (response.data.success == true) {
        $location.path('/superAdmin');
    } else if (response.data.success == false && response.data.errorCode == 100) {
        $('#myModal').modal('show');
    } else {
        $location.path('/superAdmin');
    }
});

HTML：

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title">Info</h4>
        </div>

        <div class="modal-body">

            <p>The email address {{email}} already exists</p>
        </div>

        <div class="modal-footer">
            <button data-dismiss="modal" ng-click="handleBack()" class="btn btn-default" id="cancel" type="button">OK</button>
        </div>

    </div>
</div>
</div>

Answer 1

你想使用angularjs.你必须改变HTML主体并添加控制器。以下代码是angularjs中的模态形式弹出样本。

Html正文部分：

<div ng-controller="ModalDemoCtrl">
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3 class="modal-title">I'm a modal!</h3>
        </div>
        <div class="modal-body">
            <ul>
                <li ng-repeat="item in items">
                    <a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a>
                </li>
            </ul>
            Selected: <b>{{ selected.item }}</b>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
            <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
        </div>
    </script>

    <button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
</div>

控制器部分：

angular.module('modalSample').controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {

  $scope.items = ['item1', 'item2', 'item3'];

  $scope.animationsEnabled = true;

  $scope.open = function (size) {

    var modalInstance = $uibModal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };


});


angular.module('modalSample').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {

  $scope.items = items;
  $scope.selected = {
    item: $scope.items[0]
  };

  $scope.ok = function () {
    $modalInstance.close($scope.selected.item);
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
});

角度js中的模态形式弹出窗口

1 个答案: