angularjs - Dynamic Controller and templateUrl inject in an Angular Directive -

i have troubles find solution make dynamic directive. use angular-gridster library make overview of tiles dashboard page. want dynamicly load specific tiles flexible directive.

<div gridster="vm.model.gridsteroptions">      <ul>         <li gridster-item="tile.tileparams.gridparams" ng-repeat="tile in vm.model.dashboards.tiles">              <div class="box" ng-controller="tilegrid_tilecontroller">                  <eg-tile template-url={{tile.tileengine.tempurl}}                          controller-name={{tile.tileengine.tilectrl}}>                 </eg-tile>              </div>          </li>     </ul>  </div> 

i have created egtile directive :

(function () {     function implementation() {         return {             restrict: 'e',             transclude: true,             scope: true,             controller: '@',             bindtocontroller:true,             controlleras: 'vm',             name: 'controllername',             templateurl: function (elem, attrs) {                 return attrs.templateurl || 'app/module/tilegrid/view/templates/empty.html';             }          };     } var declaration = [implementation]; angular.module('app.tilegrid').directive('egtile', declaration); }()); 

this directive work if use fixed string in egtile directive like

<eg-tile template-url="string_url" controller-name= "string_ctrl"></eg-tile> 

but want dynamicly select controller , templateurl. tried use $parse , $observe service without succes. possible make directive flexible ?

thanks in advance

i found solution problem.....

i used 2 directives provide controller-string , templateurl-string "flexible directive" egtile.

one creating controller-string :

(function () { function implementation($compile, $parse) {     return {         restrict: 'a',         scope: true,         terminal: true,         priority: 99999,         link: function (scope, elem) {             var name = $parse(elem.attr('eg-parse-controller'))(scope);             elem.removeattr('eg-parse-controller');             elem.attr('controller-name', name);             $compile(elem)(scope);         }     }; }  var declaration = ['$compile', '$parse', implementation]; angular.module('app').directive('egparsecontroller', declaration);  }()); 

and 1 creating template-string:

(function () { function implementation($compile, $parse) {     return {         restrict: 'a',         scope: true,         terminal: true,         priority: 99998,         link: function (scope, elem) {             var name = $parse(elem.attr('eg-parse-template'))(scope);             elem.removeattr('eg-parse-template');             elem.attr('template-url', name);             $compile(elem)(scope);         }     }; }  var declaration = ['$compile', '$parse', implementation]; angular.module('app').directive('egparsetemplate', declaration); }()); 

than can use :

<div gridster="vm.model.gridsteroptions">  <ul>     <li gridster-item="tile.tileparams.gridparams" ng-repeat="tile in vm.model.dashboards.tiles" ng-controller="tilegrid_tilecontroller">          <eg-tile tile="tile"                 eg-parse-template=tile.tileengine.tempurl                 eg-parse-controller='tile.tileengine.tilectrl'>         </eg-tile>     </li> </ul> 

with directive definition :

(function () { function implementation($parse) {     return {         restrict: 'e',         transclude: true,         scope: {             tile : '='         },         controller: '@',         bindtocontroller:true,         controlleras: 'vm',         name: 'controllername',         templateurl: 'app/module/tilegrid/view/tiletemplate.html',         link: function(scope, element, attrs) {           scope.getcontenturl = function() {               return attrs.templateurl || 'app/module/tilegrid/view/templates/empty.html';           }         }      }; }  var declaration = ['$parse' , implementation]; angular.module('app.tilegrid').directive('egtile', declaration); }()); 

with tiletemplate.html :

<div class="box">      <div class="box-header">        <h3>{{ vm.tile.tileparams.title }}</h3>        <div class="box-header-btns pull-right">            <a title="remove widget" ng-click="vm.removetile(tile)">                 <i class="fa fa-trash"></i>         </a>     </div>      </div>     <div class="box-content">         <div ng-include="getcontenturl()"></div>     </div> </div> 

with aproach have access tile passed egtile directive in dynamic loaded controllers , dynamic loaded views. remarks welcome.