Usage of Angualar 1 Custom Instruction -- message box

Recently, maintain an Angular 1 project. After using element UI in vue, I want to write some similar components myself. At the same time, compare the usage of angular instructions with that of single file components in vue.
Today's topic is to write a message box

How to start thinking about components

(1) Structure of components (html)

After analyzing the structure of the message box component, the first thing to think about is the header (title + Close button), body (prompt content), bottom (cancel, confirm button);
Later, considering the mask problem, we need to add a mask layer.
<div class="cmp-message-box-wrap" ng-show="isShow">
  <div class="cmp-message-box">
    <header>
      <p class="mb-title" ng-bind="mbtitle"></p>
      <span class="mb-close-icon" ng-click="closeClick()">&#8855</span>
    </header>
    <div class="mb-content" ng-bind="mbcontent"></div>
    <div class="mb-btn-wrap">
      <span class="mb-cancel" ng-bind="cancelBtnText" ng-click="cancelClick()"></span>
      <span class="mb-confirm" ng-bind="confirmBtnText" ng-click="confirmClick()"></span>
    </div>
  </div>
  <div class="mb-mask">
  </div>
</div>

(2) Style of component

May encounter difficulties, mask style level problems. The outer layer is fixed, with the lowest level; the mask is fixed, with the higher level; the message box is in the middle, with the highest level.

/* MessageBox message box */
.cmp-message-box-wrap {position: fixed; top: 0; left: 0; z-index: 9997; width: 100%; height: 100%; text-align: center; overflow: hidden; font-weight: normal; }
.cmp-message-box-wrap .mb-mask{ position: fixed; z-index: 9998; width: 100%; height: 100%; opacity: 0.7; background-color: #303133; }
.cmp-message-box-wrap .cmp-message-box{ position: fixed; z-index: 9999; width: 420px; top: 40%; background-color: #fff; display: inline-block; margin-left: -210px; text-align: left; border-radius: 4px; padding: 15px; }
.cmp-message-box-wrap .cmp-message-box header{ font-size: 18px; color: #303133; position: relative; }
.cmp-message-box-wrap .cmp-message-box header .mb-close-title{ font-size: 18px; color: #303133; }
.cmp-message-box-wrap .cmp-message-box header .mb-close-icon{ position: absolute; right: 0; top: -1px; color: #abadb2; cursor: pointer;}
.cmp-message-box-wrap .cmp-message-box header .mb-close-icon:hover{ color: #909399; }
.cmp-message-box-wrap .cmp-message-box .mb-content{ margin-top: 15px; color: #606266; font-size: 14px; line-height: 24px; }
.cmp-message-box-wrap .cmp-message-box .mb-btn-wrap{ margin-top: 15px; color: #606266; text-align: right; user-select: none; }
.cmp-message-box-wrap .cmp-message-box .mb-btn-wrap span{ padding: 9px 15px; font-size: 12px; border-radius: 3px; cursor: pointer; text-align: center; color: #606266; border: 1px solid #dcdfe6; display: inline-block; }
.cmp-message-box-wrap .cmp-message-box .mb-btn-wrap .mb-cancel{ margin-right: 10px; }
.cmp-message-box-wrap .cmp-message-box .mb-btn-wrap .mb-cancel:hover{ background: #e9e9e9; }
.cmp-message-box-wrap .cmp-message-box .mb-btn-wrap .mb-cancel:active{ background: #d6d3d3; }
.cmp-message-box-wrap .cmp-message-box .mb-btn-wrap .mb-confirm{ background: #7a7777; color: #fff; }
.cmp-message-box-wrap .cmp-message-box .mb-btn-wrap .mb-confirm:hover{ background: #8f8c8c; }
.cmp-message-box-wrap .cmp-message-box .mb-btn-wrap .mb-confirm:active{ background: #6b6868; }

(3) Functions of components

Component functions include,
1. Cancel, close and the message box disappears;
2. Confirm button. After executing a pending event, the message box disappears;
3. Click the mask layer to configure whether the message box disappears

(4) Logical coding

    .directive('messageBox', function () {
        return {
            // Declaration form
            restrict: 'AE',
            // Parameter passing
            scope: {
                // Title
                mbtitle: '@',
                // content
                mbcontent: '@',
                // Cancel button text
                cancelBtnText: '@',
                // Confirm button text
                confirmBtnText: '@',
                // Show message box or not
                isShow: '=',
                // Close callback
                close: '&',
                // Cancel callback
                cancel: '&',
                // Confirm callback
                confirm: '&'
            },
            // embed
            transclude: false,
            // Template
            templateUrl:'/templates/messageBox.html',
            // Replace original element or not
            replace: true,
            // Instruction priority
            priority: 100,
            // Instruction priority termination
            terminal: false,
            // Pre compilation execution, api for external interaction, inter Instruction Reuse, data initialization
            controller: function($scope, $element, $attrs, $transclude) {
            },
            // Quote
            require: '',
            // Scope linking to dom
            link: function ($scope, ele, attr) {
                // Click Close
                $scope.closeClick = function () {
                    $scope.close();
                    $scope.isShow = false;
                };
                // Click Cancel
                $scope.cancelClick = function () {
                    $scope.cancel();
                    $scope.isShow = false;
                };
                // Click to confirm
                $scope.confirmClick = function () {
                    $scope.confirm();
                    $scope.isShow = false;
                };
            }
        };
    })

Message box registered as global

The message box in element UI can be introduced into vue and then mounted on the root instance of vue;
In Angular 1, $rootScope can be attached to the root scope. Html is placed in index.html and initialized in the. run() method;

.run(function ($rootScope) {
    /* Initialize global variables */
    // message box
    $rootScope.$messageBoxData = {};
    /**
     * 
     * @param {*} mbTitle Title
     * @param {*} mbContent content
     * @param {*} mbCancelBtnText Cancel button text
     * @param {*} mbConfirmBtnText Confirm button text
     * @param {*} closeCb Close icon event
     * @param {*} cancelCb Cancel button event
     * @param {*} confirmCb Confirm button event
     */
    $rootScope.$messageBox = function (mbTitle, mbContent, mbCancelBtnText, mbConfirmBtnText, closeCb, cancelCb, confirmCb) {
        $rootScope.$messageBoxData.isMessageBoxShow = true;
        $rootScope.$messageBoxData.mbTitle = mbTitle;
        $rootScope.$messageBoxData.mbContent = mbContent;
        $rootScope.$messageBoxData.mbCancelBtnText = mbCancelBtnText;
        $rootScope.$messageBoxData.mbConfirmBtnText = mbConfirmBtnText;
        $rootScope.$messageBoxData.closeCb = closeCb;
        $rootScope.$messageBoxData.cancelCb = cancelCb;
        $rootScope.$messageBoxData.confirmCb = confirmCb;
    };
})

Simply call in any controller:

        /**
         * Delete dialog
         */
        function showDelDialog() {
            $rootScope.$messageBox('delete', 'Are you sure to delete?', 'cancel', 'Determine', null, null, delConfirm);
        }

Angular Instruction Learning

reference resources:
https://segmentfault.com/a/1190000005851663
https://www.cnblogs.com/ermu-learn/p/5913760.html

Tags: angular Vue

Posted on Mon, 04 May 2020 12:10:18 -0700 by xoligy