2014-05-21 123 views
0

所以我有一個按鈕,它會刪除一個東西。我可以鏈接角度指令嗎?

我已經創建了一個'confirm delete'指令,它只需打開一個帶有確認信息的$ modal,並且我已經創建了一個先前創建的'加載微調'指令,它顯示了一個微調,直到答案被解決/拒絕。

有什麼方法可以組合/鏈接這些指令而不創建新指令嗎?

我想啓動confirm指令,然後在一個真實的結果,文件加載微調指令。

在此先感謝!

ConfirmDelete:

var ConfirmDeleteDirective = (function() { 
    function ConfirmDeleteDirective($parse, $modal) { 
     var _this = this; 
     this.$parse = $parse; 
     this.$modal = $modal; 
     this.restrict = "A"; 
     this.link = function (scope, element, attrs) { 
      var func = _this.$parse(attrs["confirmDelete"]); 

      element.on("click", function (evt) { 
       var mInstance = _this.$modal.open({ 
        backdrop: "static", 
        templateUrl: "confirmDelete.html" 
       }); 

       mInstance.result.then(function() { 
        if (func) { 
         func.apply(element); 
        } 
       }, function() { 
        //do nothing! 
       }); 
      }); 
     }; 
    } 
    return ConfirmDeleteDirective; 
})(); 

LoadingSpinner:

var LoadingSpinnerDirective = (function() { 
function LoadingSpinnerDirective($parse) { 
    var _this = this; 
    this.$parse = $parse; 
    this.restrict = "A"; 
    this.link = function (scope, element, attrs) { 
     if (attrs["targetElement"]) { 
      var targetElement = angular.element("#" + attrs["targetElement"]); 
      if (targetElement.length > 0) { 
       element = targetElement; 
      } 
     } 

     var fn = _this.$parse(attrs["loadingSpinner"]), target = element[0], eventName = attrs["eventName"] || "click", opts = { 
      lines: 11, 
      length: 9, 
      width: 2, 
      radius: 4, 
      corners: 1, 
      rotate: 0, 
      direction: 1, 
      color: "#fff", 
      speed: 1.3, 
      trail: 60, 
      shadow: false, 
      hwaccel: false, 
      className: "spinner", 
      zIndex: 2e9, 
      top: attrs["spinner-top"] || "50%", 
      left: attrs["spinner-left"] || "50%" 
     }; 

     // implement our click handler 
     element.on(eventName, function (event) { 
      scope.$apply(function() { 
       element.prop("disabled", true); 
       element.css("position", "relative"); 
       var spinner = new Spinner(opts).spin(target); 

       // expects a promise 
       // http://docs.angularjs.org/api/ng.$q 
       fn(scope).then(function (res) { 
        element.prop('disabled', false); 
        spinner.stop(); 
        return res; 
       }).catch(function (res) { 
        element.prop('disabled', false); 
        spinner.stop(); 
       }); 
      }); 
     }); 
    }; 
} 
return LoadingSpinnerDirective; 
})(); 

用法示例:

<button class="btn btn-default" loading-spinner="saveAttribute(model)">Save</button> 
<button class="btn" confirm-delete="deleteAttribute(attribute)">Delete</button> 

回答

1
<div loading-spinner confirm-delete /> 

使用的優先級,以確保正確的順序。

+0

感謝您的回覆! 如果確認刪除被拒絕,我該如何停止加載微調器發射? – Che

+0

根據接受/拒絕情況,在確認 - 刪除中設置範圍值。然後在加載微調器頂部測試該值。 – RonR

相關問題