Dinamik şablonu açısaldan nasıl derlenir?

Dinamik HTML içeriğini AJAX ile yüklemek ve daha sonra açısal yönergeler içerdiğinden derlemek istiyorum. Bir açısal denetleyicisi veya direktif kapsamında olmadan açısal kullanarak yardımcı yöntemleri kullanır this class sahipDinamik şablonu açısaldan nasıl derlenir?

<!DOCTYPE html> 
<html> 
    <head> 
     <title>AngularJS Test</title> 
    </head> 
    <body> 
     <div id="contents"><!-- content --></div> 
     <script src="js/angular.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function(){ 
       $.get("http://fuiba.com/test/index.html", function(data) { 
        $("#result").html(data); 
        AngularHelper.Compile('$("#result")', data); 
       }); 
      }); 
     </script> 
    </body> 
</html>

: Sonra benim jQuery başarılı ajax isteğinden sonra kullanmak

var AngularHelper = (function() { 
    var AngularHelper = function() { }; 

    /** 
    * ApplicationName : Default application name for the helper 
    */ 
    var defaultApplicationName = "MyApp"; 

    /** 
     * Compile : Compile html with the rootScope of an application 
     * and replace the content of a target element with the compiled html 
     * @$targetDom : The dom in which the compiled html should be placed 
     * @htmlToCompile : The html to compile using angular 
     * @applicationName : (Optionnal) The name of the application (use the default one if empty) 
     */ 
    AngularHelper.Compile = function ($targetDom, htmlToCompile, applicationName) { 
     var $injector = angular.injector(["ng", applicationName || defaultApplicationName]); 

     $injector.invoke(["$compile", "$rootScope", function ($compile, $rootScope) { 
         //Get the scope of the target, use the rootScope if it does not exists 
      var $scope = $targetDom.html(htmlToCompile).scope(); 
      $compile($targetDom)($scope || $rootScope); 
      $rootScope.$digest(); 
     }]); 
    } 
    return AngularHelper; 
})();

Ama bu hatayı alıyorum (bu codepen bakınız):

$targetDom.html is not a function

kaynak

2016-03-29 Mustapha Aoussar

. Derleme ('$ ("# sonuç")', veri); ' argüman' $ ta dizesini ('$ (" # sonuç ")" ') iletiyorsunuz rgetDom' ama daha sonra fonksiyonunda bunun üzerinde '.html' işlevini çağırarak jQuery nesnesi gibi davranırsınız. Dize sınıfı elbette böyle bir yönteme sahip değildir. –

@RytisAlekna Size ve MiTa'ye teşekkürler, sorun çözüldü, ancak başka bir hata alıyorum. Bkz. Bu [codepen] (http://codepen.io/anon/pen/xVLVVv). –

Sen, AngularHelper.Compile işlevinde ilk parametre olarak değil bir dize bir DOM elementi geçmeleri gerekiyor

yüzden

AngularHelper.Compile($("#result"), data);

değil bu hat `AngularHelper olarak

AngularHelper.Compile('$("#result")', data);

kaynak

2016-03-29 14:09:57 MiTa

Teşekkürler Çok @MiTa !! Sorun çözüldü, ama başka bir hata alıyorum: 'Modül 'Uygulamam' mevcut değil! Ya modül adını yanlış yazdınız ya da yüklemeyi unutmuşsunuz. Bir modül kaydediyorsanız, bağımlılıkları ikinci argüman olarak belirtin. '[Codepen] (http://codepen.io/anon/pen/xVLVVv) –

41' angular.module ('MyApp') 'na bakın. sadece bu modülü alıyorsunuz, ancak bunu oluşturmak zorundasınız angular.module ('MyApp', []) ' – MiTa

Neden bu _AngularHelper_ sınıfının neden diğerleri için mükemmel bir şekilde çalıştığını bilmiyorum ve benim için değil. Başka bir hata alıyorum: $ targetDom.html (...). Kapsam bir işlev değil. Çözmeyi deneyeceğim! Teşekkür ederim!! –

Dinamik şablonu açısaldan nasıl derlenir?

cevap

İlgili konular