javascript - How to `replaceWith` directive element with template in directive -

in directive, using 2 template. according index template switched.

the problems after find index calling method element.html() replace updated template.

but that's makes directive element wrapped that. don't want wrapped template. how this?

here result getting:

<program-name name="titre1" data-page="home" index="0" ng-repeat="appname in appnames" class="ng-scope ng-isolate-scope"><h2 class="que t0" ng-click="callme()">titre1arif</h2></program-name> 

this looking :

<h2 class="que t0" ng-click="callme()">titre1arif</h2> 

any 1 me this? live demo

here js :

// code goes here "use strict"; angular.module('tcpapp', []) .controller('mainctrl', function($scope) {   $scope.appnames=[{title:'titre1'},                    {title:'titre2'},                    {title:'titre3'}];  }) .directive('programname', function ( $compile ) {         return {             restrict    : 'ae',             replace     : true,             scope       : {                             name:'@',                             index:'@'                         },              link        : function (scope, element, attr) {                             scope.callme = function () {                                 console.log($(element).prop('class'));                             }                              var gettemplate = function( index ) {                               return number(index) ? '<h2 class="que t{{index}}" ng-click=callme()>{{name}}</h2>' : '<h2 class="que t{{index}}" ng-click=callme()>{{name}}arif</h2>';                              }                               element.html(gettemplate(scope.index));                              $compile(element.contents())(scope);                         }         }     }) 

you replacewith or unwrap after element has been compiled.

link: function(scope, element, attr) {         //....          element.html(gettemplate(scope.index));          $compile(element.contents())(scope);          element.replacewith(element.contents());         //or         //element.contents().unwrap();       } 

// code goes here  "use strict";  angular.module('tcpapp', [])    .controller('mainctrl', function($scope) {      $scope.appnames = [{        title: 'titre1'      }, {        title: 'titre2'      }, {        title: 'titre3'      }];      })    .directive('programname', function($compile) {      return {        restrict: 'ae',        replace: true,        scope: {          name: '@',          index: '@'        },          link: function(scope, element, attr) {          scope.callme = function() {            console.log($(element).prop('class'));          }            var gettemplate = function(index) {            return number(index) ? '<h2 class="que t{{index}}" ng-click=callme()>{{name}}</h2>' : '<h2 class="que t{{index}}" ng-click=callme()>{{name}}arif</h2>';          }            element.html(gettemplate(scope.index));            $compile(element.contents())(scope);          //element.replacewith(element.contents());          //element.contents().unwrap();        }      }    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>  <div ng-app="tcpapp" ng-controller="mainctrl">    <program-name name="titre1" data-page="home" index="{{$index}}" ng-repeat="appname in appnames" class="ng-scope ng-isolate-scope">      <h2 class="que t0" ng-click="callme()">titre1arif</h2>    </program-name>  </div>

also note not need $(element) redundant, element jq(lite/uery) wrapped. , in template meant use live $index repeater, index="{{$index}}". note directive replace option work if directive has template specified template or templateurl. replace option has been deprecated well.

had index been assigned static string (ex: index="0") use function argument syntax of template/templateurl.

   return {         restrict    : 'ae',         replace     : true,         scope       : {                         name:'@',                         index:'@'                     },         template: function(elm, attr){            return number(attr.index) ?                 '<h2 class="que t{{index}}" ng-click=callme()>{{name}}</h2>'                  : '<h2 class="que t{{index}}" ng-click=callme()>{{name}}arif</h2>';         } 

// code goes here  "use strict";  angular.module('tcpapp', [])    .controller('mainctrl', function($scope) {      $scope.appnames = [{        title: 'titre1'      }, {        title: 'titre2'      }, {        title: 'titre3'      }];      })    .directive('programname', function($compile) {      return {        restrict: 'ea',        replace: true,        scope: {          name: '@',          index: '@'        },        template: function(elm, attr){             return number(attr.index) ?                  '<h2 class="que t{{index}}" ng-click=callme()>{{name}}</h2>'                   : '<h2 class="que t{{index}}" ng-click=callme()>{{name}}arif</h2>';          },        link: function(scope, element, attr) {          scope.callme = function() {            console.log(element.prop('class'));          }        }      }    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>  <div ng-app="tcpapp" ng-controller="mainctrl">    <div data-page="home"  ng-repeat="appname in appnames" class="ng-scope ng-isolate-scope">      <program-name index="0" ng-if="$first"  name="titre1"></program-name>      <program-name index="1" ng-if="!$first" name="titre1"></program-name>    </div>  </div>