Jak zmusić AngularJS do kompilacji kodu wygenerowanego przez dyrektywę?

Question

Proszę mi pomóc, w jaki sposób możemy sprawić, że AngularJS skompiluje kod wygenerowany przez dyrektywę?

Można nawet znaleźć ten sam kod tutaj 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

Oto wersja, która nie korzysta z funkcji kompilacji ani funkcji Link:

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>', 
    }; 
}); 

Zauważ, że szablon jest zawinięty w rozpiętości <> dlatego, że szablon musi mieć jeden element główny. (Bez przęsła <>, to dwa < div> korzeniowe).

HTML musi być nieznacznie zmodyfikowany, aby interpolować:

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

Fiddle.

Answer 2

Musisz utworzyć kątowy element z szablonu i wykorzystania usługa $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

Kod: 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; 
}); 

Objaśnienie: Ten sam kod powinien być stosowany w funkcji kompilacji niż funkcja łączenia. AngularJS kompiluje wygenerowaną zawartość funkcji kompilacji.