javascript - AngularJS : Reuse custom directive programmatically -

i working on first single page angular.js application , kind of stuck @ programmatically compilling/evaluating custom directive in order insert dom within controller. custom directive created uses 2 values (which return functions , take parameter) , parameter. whole thing works fine ng-repeat in initial html of spa:

.directive('mydirective', ['value1', 'value2', function('value1', 'value2'){     return {         restrict: 'e',         scope: {             param: '=param'         },         replace: true,         templateurl: '/path/to/template.html',         link: function(scope, element, attrs){             scope.v1 = value1(scope.param);             scope.v2 = value2(scope.param);         }     }; }) 

the directive template looks this:

<div>     <img ng-src="{{ param.img.src }}" />     <div>         <a href="{{ param.link.src }}">{{ param.link.text }}</a>         <time datetime="{{ v1 }}">{{ v2 | date: 'medium' }}</time>         <span ng-bind-html="param.text | customfilter1 | customfilter2 | customfilter3"></span>     </div> </div> 

everything works out nicely when use directive in page html this:

<ul ng-controller="somecontroller" ng-cloak>     <li ng-repeat="param in params">         <my-directive param="param"></my-directive>     </li> </ul> 

i reuse directive dynamically generate respective html programmatically in function within controller. approach thereto tried use $compile function without success:

// in controller: // ... $scope.generatemydirective = function(param){     var compiled = $compile('<my-directive param="param"></my-directive>')({});     someelement.innerhtml = compiled[0]; }; 

the result (i.e. someelement) include static html of directive, won't evaluate expressions within directive, e.g. {{ param.img.src }} or {{ v1 }}. furthermore following type error thrown:

typeerror: scope.$new not function 

i tried compile different scopes, e.g. $scope of controller or true generate new scope, none evaluate expressions within directive template. tried invoke $scope.$apply() after inserting directive html someelement, didn't work either.

i'm kind of stuck @ point, out of ideas , thankful hints. hope guys can me fix this.

very 1st thing made mistake directive incorrect. camel case should - separated letter in small case

it should

<my-directive param="param"></my-directive> 

instead of

<mydirective param="param"></mydirective> 

also $compile should compile element scope, need not worry creating new scope controller, directive has isolated scope.

$compile('<my-directive param="param"></my-directive>')($scope);