Pass through applicable directives to custom directive - angularjs

Question

I understand how to pass directives through my custom directive, like this:
Page.html
<my-directive read-only-attr="myVariable" label-style-attr="anotherVariable"></my-directive>
Directive
myApp.directive("myDirective", function () {
return {
restrict: "E",
templateUrl: "myTemplate.html",
scope: {
readOnlyScopeVar: "=readOnlyAttr",
styleScopeVar: "=labelStyleAttr"
},
link: function (scope, element, attrs) {
}
};
});
Template
<div>
<label ng-style="styleScopeVar" />
<input type="text" ng-readonly="readOnlyScopeVar" />
</div>
My template is much more complex than this but I simplified it for the question.
My question is: How do I prevent ngReadonly and ngStyle from having to run if the user hasn't specified a "read-only-attr" or "label-style-attr" on my directive? There are tons of common angular directives that I want to allow people to apply to the input and other elements inside my template (ngClass, ngDisabled, ngChange, ngPattern, ngIf, etc), but I don't want to run them all if the person hasn't specified them on my directive. It's as if I need a template to build the template.
Also, note that I've read about transclusion but I don't like the idea of allowing the user to edit the input element directly, and there are multiple elements I may want to apply things to like in this example I could change the label color if the read-only-attr reference is true.

Answer 1

One way to do it would be to use $compile. Here's a working plnkr:
https://plnkr.co/edit/S8pUSH?p=preview
Note there are many ways to do this, and this one is just one simple example for demonstration:
var app = angular.module('app', []); //define the module
//setup the template
app.run(['$templateCache', function($templateCache){
$templateCache.put('someDirectiveTmpl','<div>\
<label $$%%ngStylePlaceholder$$%% />My Label:</label>\
<input type="text" $$%%ngReadonlyPlaceholder$$%% />\
</div>');
}])
/**
* #description someDirective gets a config object that holds dynamic directives' names and values. e.g.:
* {
* 'ngStyle': '{background: red;}',
* 'ngReadonly': true
* }
*
*/
app.directive('someDirective', ['$log', '$compile', '$templateCache', function($log, $compile, $templateCache){
return {
restrict: 'AE',
controllerAs: 'someDirectiveCtrl',
scope: {},
bindToController: {
directiveConfig: '='
},
controller: function($scope, $element){
// a method to convert camelcase to dash
function camelCaseToDash( myStr ) {
return myStr.replace( /([a-z])([A-Z])/g, '$1-$2' ).toLowerCase();
}
// get the template
var template = $templateCache.get('someDirectiveTmpl');
var placeHolderRegExp = /\$\$%%(.*)\$\$%%/g;
// place the binding per existing property
angular.forEach(this.directiveConfig, function(varName, key){
template = template.replace('$$%%' + key + 'Placeholder$$%%', camelCaseToDash(key) + '="someDirectiveCtrl.directiveConfig.' + key + '"');
});
// remove unneeded properties placeholders
template.replace(placeHolderRegExp, '');
//compile the directive
var templateElement = angular.element(template);
$compile(templateElement)($scope);
// append to element
$element.append(templateElement);
}
}
}]);
Note the $$%%ngAnythingPlaceholder$$%%in the template. I get the config from parent directive (in plnkr I've used a controller for simplicity). I use a config object in the example (you could do this with separate variables, but I like setting a config object API).
I then replace the placeholders according to what I've got in the config and remove what I don't need. I then compile the template.
In the parent directive's controller you could do something like what I did in the controller:
$scope.config = {
ngReadonly: true
}
Again, I note you should not use a controller and of course, not to
use the $scope itself but the directive's controller's this. I use
$scope and controller here only for ease of demo.
You can add anything you want to this config (and of course, add placeholders to the various parameters in the template).
Now just add the directive to your template:
<some-directive directive-config="config"></some-directive>