decorator

by bogdan_vq

HTML

<div ng-app="app">
  <div class="u1" bar> </div>
  
</div>

CSS

[bar] * {display: inline-block;}

.u1 {
  height: 38px;
  background-color: #fff;
  width : 400px;
  border: none;
  padding-top: 2px;
  padding-bottom: 2px;
}

.s1 {
  height: 25px;
  background-color: red;
  width : 50px;
  margin-right: 5px;
  vertical-align: top;
}

.s1 input {
   height: 15px;
  width : 30px;
}

button {
  float: right!important;
}

#in {
  height: 38px;
  border: 1px solid #fff;
  background-color : #eee;
}

JavaScript

var app = angular.module('app', []);

app.controller("MainCtrl", function($scope, $compile) {
  
});

app.directive("bar", function($compile) {
  return {
    restrict: 'AE',
    transclude: true,
    template: '<div> <div></div><div class="s1" trans></div></div><button ng-click="clic()">click</button> <input id="in"/>',
    link: function(scope, element, attrs){
      scope.clic = function(){
      console.log(element);
          var e = $compile('<div foo class="s1"></div>')(scope);
          element.append(e);
      }
    }
  };
});

app.directive('trans', function() {
  return {
    link: function(scope, el, attrs, ctrl, transclude) {
      transclude(function(transcludeEl) {
        el.append(transcludeEl);
      });
    }
  };
});

app.directive("foo", function($compile) {
  return {
    restrict: 'A',
    scope: {mod : '@'},
    template: '<div><input ng-model="mod"/></div>',
    link: function(scope, element, attrs){
     scope.$watch('mod', function(){
     		console.log(scope.mod);
     });
    }
  };
});
/*
app.config(function($provide) {
  $provide.decorator('fooDirective', function($delegate) {
    var directive = $delegate[0];
    
    directive.template = "<div foo trigger="@">{{name}}</div>";
   
    return $delegate;
  });
});*/