Dynamic (wildcard) selector for AngularJS directive

Issue

Is it possible to create a directive like ng-prop-* that uses a wildcard in the same way? for example

<div bind-label="$ctrl.title"></div>

Where label would be meta data to pass into it and could be anything.

Solution

You would still be required to define your 'dynamic' directives

.directive('bindFoo', function() {})
.directive('bindBar', function() {})

Than define container directive in which you would append those dynamic ones based on parameter by using $compile service.

.directive('containerDirective', function($compile) {
        return {
          restrict: 'AE',
          link: function (scope, elem, attrs, ctrl) {
            var param = 'bar';
            var tpl = '<div bind-' + param + '></div>';

            elem.html($compile(tpl)(scope));
          }

        }  
      })

How would you get var param value into directive is totally up to you.

Answered By - Rijad Lendo