Come rendere AngularJS compilare il codice generato dalla direttiva?

Question

Please help me on, Come possiamo rendere AngularJS compilare il codice generato dalla direttiva?

È anche possibile trovare lo stesso codice qui, http://jsbin.com/obuqip/4/edit

HTML

<div ng-controller="myController"> 
    {{names[0]}} {{names[1]}} 
    <br/> <hello-world my-username="names[0]"></hello-world> 
    <br/> <hello-world my-username="names[1]"></hello-world> 
    <br/><button ng-click="clicked()">Click Me</button> 
</div> 

Javascript

var components= angular.module('components', []); 
components.controller("myController", 
    function ($scope) { 
     var counter = 1; 
     $scope.names = ["Number0","lorem","Epsum"]; 
     $scope.clicked = function() { 
      $scope.names[0] = "Number" + counter++; 
     }; 
    } 
); 

// **Here is the directive code** 
components.directive('helloWorld', function() { 
    var directiveObj = { 
     link:function(scope, element, attrs) { 
      var strTemplate, strUserT = attrs.myUsername || ""; 
      console.log(strUserT); 
      if(strUserT) { 
       strTemplate = "<DIV> Hello" + "{{" + strUserT +"}} </DIV>" ; 
      } else { 
       strTemplate = "<DIV>Sorry, No user to greet!</DIV>" ; 
      } 
      element.replaceWith(strTemplate); 
     }, 
     restrict: 'E' 
    }; 
    return directiveObj; 
}); 

Answer 1

Ecco una versione che non utilizza una funzione di compilazione né una funzione di collegamento:

myApp.directive('helloWorld', function() { 
    return { 
    restrict: 'E', 
    replace: true, 
    scope: { 
     myUsername: '@' 
    }, 
    template: '<span><div ng-show="myUsername">Hello {{myUsername}}</div>' 
    + '<div ng-hide="myUsername">Sorry, No user to greet!</div></span>', 
    }; 
}); 

Si noti che il modello è avvolto in un arco <> a causa di un modello deve avere un elemento della radice. (Senza il < span>, avrebbe due < div> elementi radice.)

deve modificare leggermente l'HTML, interpolare:

<hello-world my-username="{{names[0]}}"></hello-world> 

Fiddle.

Answer 2

È necessario creare un elemento angolare dal modello e l'uso il servizio $compile

jsBin

components.directive('helloWorld', ['$compile', function(compile) { 
    var directiveObj = { 
     link: function(scope, element, attrs) { 
      var strTemplate, strUserT = attrs.myUsername || ""; 
      console.log(strUserT); 
      if (strUserT) { 
       strTemplate = "<DIV> Hello" + "{{" + strUserT +"}} </DIV>" ; 
      } else { 
       strTemplate = "<DIV>Sorry, No user to greet!</DIV>" ; 
      } 

      var e = angular.element(strTemplate); 
      compile(e.contents())(scope); 
      element.replaceWith(e); 
     }, 
     template: function() { 
      console.log(args); 
      return "Hello"; 
     }, 
     restrict: 'E' 
    }; 
    return directiveObj; 
}]); 

Answer 3

Codice: http://jsbin.com/obuqip/9/edit

components.directive('helloWorld', function() { 
    var directiveObj = { 
     compile:function(element, attrs) { 
      var strTemplate, strUserT = attrs.myUsername || ""; 
      console.log(strUserT); 
      if(strUserT) { 
       strTemplate = "<DIV> Hello " + "{{" + strUserT +"}} </DIV>" ; 
      } else { 
       strTemplate = "<DIV>Sorry, No user to greet!</DIV>" ; 
      } 
      element.replaceWith(strTemplate); 
     }, 
     restrict: 'E' 
    }; 
    return directiveObj; 
}); 

Spiegazione: Lo stesso codice deve essere usato in funzione di compilazione, piuttosto che la funzione di collegamento. AngularJS compila il contenuto generato della funzione di compilazione.