2014-05-21 127 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

相关问题