AngularJS - a directive for creating a conditional button, cascading all attributes

Question

I would like to create an AngularJS directive that can create a custom button with ng-if based on the trigger-event attribute (bound and with a dynamic value according to what the user is doing on the form) and cascading all other attributes ( any , not predictable) on the new button. The button will contain the same HTML code for myButton.

The trigger condition is specified in the controller:

$scope.trigger = (specified in the controller and dynamic); // can be true or false
$scope.disabled = (specified in the controller and dynamic); // can be true or false

myButton will be something like this:

<my-button trigger-event="trigger" class="class" ng-disabled="disabled" ng-click="callback" any-other-attribute=[...]>
  <span>any html</span>
  <any-other-html></any-other-html>
</my-button>

The directive will be reflected something like this:

<button ng-if="trigger-event" directive-to-trigger-event class="class" ng-disabled="disabled" any-other-attribute=[...]>
  <span>any html</span>
  <any-other-html></any-other-html>
</button>
<button ng-if="!trigger-event" type="submit" class="class" ng-disabled="disabled" ng-click="callback" any-other-attribute=[...]>
  <span>any html</span>
  <any-other-html></any-other-html>
</button> 

directive-to-trigger-event can be anything: something that triggers a popup, something that resets a form, anything.

- , ? .

: http://plnkr.co/edit/kHCoExQSTPssL294NUux?p=preview

!

Answer 1

. , .

, . , , .

, , :

<my-button trigger-event="triggerFunctionName" class="class" other-attribute=[...]
         trigger-html-content="triggerHTMLPartialName">
     <span>any html</span>
     <any-other-html></any-other-html>
</my-button>

, HTML- URL-, , .

Answer 2

:

app.directive('myButton', function($timeout) {

  var tpl = function(scope, element, attrs) {
    var btn = "<button ng-if='trigger'>"
            + "a<ng-transclude></ng-transclude>"
            + "</button>"
            + "<button ng-if='!trigger'>"
            + " <ng-transclude></ng-transclude>"
            + "</button>";
    return btn;
  }

  return {
    restrict: 'E',
    template: tpl,
    transclude:true,
    scope: {
      eventData: '=',
      trigger: '=triggerEventIf'
    },
    link: function(scope, element, attrs, ctrl, transclude) {
      scope.event = {
        'title': scope.eventData.title
      }

      var setAttributes = function(){
        for(var attribute in attrs){
          if(attribute !== 'triggerEventIf' && attribute.charAt(0) !== '$')
          angular.element(element[0].children).attr(attribute,attrs[attribute])

        }
      }

      scope.$watch('trigger', function(oldValue, newValue){
        if(oldValue !== newValue){
          $timeout(function(){
            setAttributes();
          });
        }
      })

      $timeout(function(){
        setAttributes();
      });
    }
  };
});

http://plnkr.co/edit/Hk1AvRS3nN4YXqcLvZGR?p=preview

.

, $timeout, , setAttributes() angular. setAttributes DOM , , angular, . $timeout - angular -. , , . angular , $timeout . , , .

$apply $digest , . $timeout.

, .