Question

我正在尝试打开弹出窗口（这将是一个向导）模式对话框。该对话框没有弹出，而是在主页上进行了布局。附上我的代码。

Referred Tutorial：view-source：https://angular-ui.github.io/bootstrap/

有人可以帮助解决造成问题的原因吗？

modal.js
Pulled from the latest github/angularui/Bootstrap/modal/src/

app.js

var myApp = angular.module('myApp',['ngAnimate', 'ui.router','ui.bootstrap']);
myApp.controller('uploadWizardController', function ($scope, $uibModal, $log) {

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

  $scope.animationsEnabled = true;

  $scope.open = function (size) {

    var modalInstance = $uibModal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'upload-wizard-template.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());
    });
  };

  $scope.toggleAnimation = function () {
    $scope.animationsEnabled = !$scope.animationsEnabled;
  };

});

// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $uibModal service used above.

myApp.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items) {

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

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

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

myApp.config(function($stateProvider, $urlRouterProvider) {

    $stateProvider

        // route to show our basic form (/form)
        .state('form', {
            url: '/form',
            templateUrl: 'upload-wizard-template.html',
            controller: 'uploadWizardController'
        })

        // nested states
        // each of these sections will have their own view
        // url will be nested (/form/profile)
        .state('form.step1', {
            url: '/step1',
            templateUrl: 'upload-wizard-step1.html'
        })

        // nested states
        // each of these sections will have their own view
        // url will be nested (/form/profile)
        .state('form.step2', {
            url: '/step2',
            templateUrl: 'upload-wizard-step2.html'
        })

        // nested states
        // each of these sections will have their own view
        // url will be nested (/form/profile)
        .state('form.step3', {
            url: '/step3',
            templateUrl: 'upload-wizard-step3.html'
        })

        // nested states
        // each of these sections will have their own view
        // url will be nested (/form/profile)
        .state('form.step4', {
            url: '/step4',
            templateUrl: 'upload-wizard-step4.html'
        })

    // catch all route
    // send users to the form page
    $urlRouterProvider.otherwise('/form/step1');
})

Index.html

    <!doctype html>
<html lang="en" ng-app="myApp">
<head>
  <title>Home - Test</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>s
  <script src="js/app.js"></script>
  <script src="js/angular/modal.js"></script>
  <script src="js/angular/ui-bootstrap-tpls-1.1.1.min.js"></script>
</head>
<body>
    <div>
        <div>
            <div>
                <script type="text/ng-template" id="signInDialog.html">
                    <div class="modal-header">
                        <h3 class="modal-title">Sign In</h3>
                    </div>
                    <span>Username</span>
                    <span><input ng-model="username"/></span>
                    <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>
                <span><button id="signIn" ng-click="signIn()">Sign In</button></span>
            </div>
            <div ng-controller="uploadWizardController">
                <script type="text/ng-template" id="upload-wizard-template.html">
                    <div class="modal-template">
                        <div class="modal-header">
                            <h3 class="modal-title">Upload</h3>
                        </div>
                        <div ui-view></div>
                    </div>
                </script>
                <span><button id="upload" ng-click="open()">Upload</button></span>
            </div>
        </div>
    </div>
</body>
</html>



Image Description: A wizard is expected to be popped out - instead it is expanded in the home page itself


  [1]: http://i.stack.imgur.com/G20f5.png

Answer 1

在控制器中使用$ modal服务而不是$ uibModal。

Answer 2

请确认您是否包含了所需的所有CSS样式。 bootstrap和angular ui-bootstrap是所需的Style库之一。

Modal嵌入在主页本身而不是弹出

2 个答案: