title: Can I chain angular directives?
body: <p>So I've got a button which will delete a thing.</p>
  
  <p>I've created a 'confirm delete' directive which simply opens a $modal with a confirmation message and I've got a previously created 'loading spinner' directive which shows a spinner until a promise is resolved/rejected.</p>
  
  <p>Is there any way to combine/chain these directives without creating a new one?</p>
  
  <p>I would like to fire the confirm directive, then on a truthy result, file the loading spinner directive.</p>
  
  <p>Thanks in advance!</p>
  
  <p>ConfirmDelete:</p>
  
  <pre><code>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;
  })();
  </code></pre>
  
  <p>LoadingSpinner: </p>
  
  <pre><code>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 &gt; 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;
  })();
  </code></pre>
  
  <p>usage examples:</p>
  
  <pre><code>&lt;button class="btn btn-default" loading-spinner="saveAttribute(model)"&gt;Save&lt;/button&gt;
  &lt;button class="btn" confirm-delete="deleteAttribute(attribute)"&gt;Delete&lt;/button&gt;
  </code></pre>