SuccessError 彈出訊息使用簡單的連結功能

連結函式是自定義指令中操作 DOM 的最佳方式。它按順序將三個屬性作為輸入（範圍，元素，屬性）

scope：其指令的本地範圍物件。

element：使用指令的 html 元素。

attribute：它允許訪問元素引用中使用的所有屬性。

// on success call or similarly error, warning, info in controller
    $scope.message={
                text: "Saved Successfully",
                type: "SUCCESS"
                };    
                
    <user-info msg="message"> </user-info>   //in html

    var mainApp = angular.module("mainApp", []);
     mainApp.directive('userInfo', function() {
        var directive = {};
        directive.restrict = 'E';
        
        directive.scope = {
           message : "=msg"
        },
        
        directive.link = function(scope, element, attributes) {
            if(scope.message.type==='SUCCESS')
              scope.message.text = 'SUCCESS: '+scope.message.text+' !';
            else if(scope.message.type==='ERROR')  
              scope.message.text = 'ERROR: '+scope.message.text+' !';
            else if(scope.message.type==='WARNING')  
              scope.message.text = 'WARNING: '+scope.message.text+' !'
            else if(scope.message.type==='INFO')  
              scope.message.text = 'INFO: '+scope.message.text+' !'
          
            element.on('click', function(event) {     //on click of div pop-up will smoothly close
                      $(this).fadeOut();   
                      });
           },
           directive.template = '<div ng-class={{message.type}}>'+            // one can create different bg-color as per type of message and width/height
                                '<div class="message-text">{{message.text}}<div>'+   //message text will be printed
                                '<div>';
           
        return directive;
     });