How to elegantly use the modal component of ui.bootstrap in angular.js

The modal component of ui.bootstrap in

angularjs can easily realize the communication between the page controller and the modal box controller, especially the pop-up modal box has more complex table information that the user needs Fill in, let’s get to the topic:

Register the controller of the global modal box instance

angular.module('myApp.Controllers', [
        'ui.bootstrap'
])
.controller('appModalInstanceCtrl', function ($scope,$uibModalInstance,modalDatas) {
      var $ctrl = this;
      $scope.modalDatas = modalDatas; //双向绑定，方便在确认中回传可能修改的字段
     
      // $ctrl.insta
      $ctrl.ok = function (val) {
        $scope.modalDatas.result = val;
        $uibModalInstance.close(
          $scope.modalDatas  //在模态框View中修改的值传递回去，view中可以直接添加属性
        );
      };
      
      $ctrl.cancel = function () {
        $uibModalInstance.dismiss('cancel');
      };
    })

Create a new template file src/templates/modalViews/confirm.html

<p class="modal-header">
    <h3 class="modal-title">标题</h3>
</p>

<p class="modal-body">
    <p class="content">
      <label class="label">确认信息：</label>
      <input type="text"  ng-model="modalDatas.msg">
    </p>
    <p class="content">
      <label class="label">备注信息：</label>
      <input type="text"  ng-model="modalDatas.content">
    </p>
    
</p>

<p class="modal-footer">
    <button class="btn btn-primary" type="button" ng-click="$ctrl.ok()">确定</button>
    <button class="btn btn-default" type="button" ng-click="$ctrl.cancel()">取消</button>
</p>

Page trigger code:

<button type=&#39;button&#39; class=&#39;btn btn-primary&#39; ng-click="openModal(&#39;md&#39;, &#39;confirm&#39;)">打开'confirm' modal</button>

Register the openModal function in the controller that manages the page trigger code

Use ui .bootstrap provides the service $uibModal to create a modal box. You only need to simply configure the modal box view and controller. $uibModalProvides the only method open(options)Configuration. (If you want to see more, go to the PHP Chinese website AngularJS Development Manual to learn)

optionsParameters:
animation (Type: boolean, Default: true) Modal box opening/closing animation control
appendTo (Type: angular.element, Default: body) Specifies the position where the modal box code is inserted, Insert into body by default
backdrop (Type: boolean|string, Default: true) Mask layer display control
backdropClass (Type: string) Add to mask layer Extra class
bindToController (Type: boolean, Default: false) - When using controllerAs (for example, set to $ctrl) and this property is set to true, you can set $scope Bind to controller. The idea is that $scope is the scope that can manage the modal box. That is to say, if the modal box is inserted into the body by default, then the controller that manages the body tag will be bound to $ctrl, so it is best to combine itappendToUse together.
component (Type: string, Example: myComponent) Use the modal box as a component
controller (Type: function|string|array, Example: MyModalController) Specify the modal box controller
controllerAs (Type: string, Example: ctrl) Controller alias
resolve (Type: Object) - Pass data to the modal box ;
templateUrl (Type: string) Specifies the modal box view layer template
size (Type: string, Example: lg) Specifies the modal box size

<strong>还有很多属性，可以到官网查询，比如控制多层模态框等等。</strong>

$scope.openModel = function (size, type) {
      //type即view文件名，在同一个页面有多个不同业务的模态框的情况下很方便
      var tplUrl = './src/templates/modalViews/' + type + '.html';
      $scope.modalDatas = {
          msg: 'Hello World!'
      };

      var modalInstance = $uibModal.open({
        animation: true,
        ariaLabelledBy: 'modal-title',
        ariaDescribedBy: 'modal-body',
        templateUrl: tplUrl,
        controller: 'appModalInstanceCtrl',
        controllerAs: '$ctrl',
        size: size,
        resolve: {
          modalDatas: function () {
            return $scope.modalDatas;
          }
        }
      });
      modalInstance.result.then(function (datas) {
        // 点击确认按钮执行的代码
        //可以从datas中获取msg和content字段
        //进一步操作：发起http请求等       
      }, function () {
        // 点击取消按钮执行的代码
        console.info('Modal dismissed at: ' + new Date());
      });
    };

Okay , this article ends here (if you want to see more, go to the PHP Chinese website AngularJS User Manual to learn). If you have any questions, you can leave a message below.

The above is the detailed content of How to elegantly use the modal component of ui.bootstrap in angular.js. For more information, please follow other related articles on the PHP Chinese website!