찾다

 >  Q&A  >  본문

javascript - angularjs怎么编写一个公共的弹出层插件?

点击页面上某个按钮,弹出类似bootstrap的模态对话框。
点击对话框上的确定按钮,会传递数据到页面上展示。

求具体实现代码,重用性要高,维护性要好!

高洛峰高洛峰2898일 전483

모든 응답(3)나는 대답할 것이다

  • 阿神

    阿神2017-04-10 15:01:03

    下面是AngularUI上的例子,有几点需要注意的地方

    • 不要忘了引用bootstrap.cssui.bootstrapmodule
    • 不要忘了template

      1

      2

      3

      4

      5

      6

      7

      8

      9

      10

      11

      12

      13

      14

      15

      16

      17

      18

      19

      20

      21

      22

      23

      24

      25

      26

      27

      28

      29

      30

      31

      32

      33

      34

      35

      36

      37

      38

      39

      40

      41

      42

      43

      44

      45

      46

      47

      48

      49

      50

      51

      52

      53

      54

      55

      56

      57

      58

      59

      60

      61

      62

      63

      64

      65

      66

      67

      68

      69

      70

      71

      72

      73

      74

      75

      76

      77

      <code><html ng-app="ui.bootstrap.demo">

          <head>

              <script src="angular.js"></script>

              <script src="ui-bootstrap-tpls-0.12.1.min.js"></script>

              <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

              </head>

              <body>

       

                  <p ng-controller="ModalDemoCtrl">

                      <script type="text/ng-template" id="myModalContent.html">

                          <p class="modal-header">

                              <h3 class="modal-title">I'm a modal!</h3>

                          </p>

                          <p class="modal-body">

                              <ul>

                                  <li ng-repeat="item in items">

                                      <a ng-click="selected.item = item">{{ item }}</a>

                                  </li>

                              </ul>

                              Selected: <b>{{ selected.item }}</b>

                          </p>

                          <p class="modal-footer">

                              <button class="btn btn-primary" ng-click="ok()">OK</button>

                              <button class="btn btn-warning" ng-click="cancel()">Cancel</button>

                          </p>

                      </script>

       

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

                      <button class="btn btn-default" ng-click="open('lg')">Large modal</button>

                      <button class="btn btn-default" ng-click="open('sm')">Small modal</button>

                      <p ng-show="selected">Selection from a modal: {{ selected }}</p>

                  </p>

              </body>

      <script>

      angular.module('ui.bootstrap.demo',['ui.bootstrap'])

      .controller('ModalDemoCtrl', function($scope, $modal, $log) {

       

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

       

        $scope.open = function(size) {

       

          var modalInstance = $modal.open({

            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());

          });

        };

      })

      .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');

        };

      });

      </script>      

      </html>

      </code>

    회신하다
    0
  • 大家讲道理

    大家讲道理2017-04-10 15:01:03

    编写一个模态对话框 要引入 ui-bootstrap-tpls-0.12.1.min.js, 个人不建议这么做 自己写一个组件 就几行代码 可以实现这些效果 样式倒是可以用bootstrap的。 自己写组件比用别人的更灵活 能把控的住 而且可以提升自身能力, 下面就是我用directive写的弹窗 具体的代码后面提供,

    회신하다
    0
  • PHP中文网

    PHP中文网2017-04-10 15:01:03

    http://angular-ui.github.io/bootstrap/

    회신하다
    0
  • 취소회신하다