2013-02-09 8 views
18

Jako że jestem nowy w Angular JS, zastanawiałem się, w jaki sposób mogę załadować zewnętrzny szablon i skompilować go z pewnymi danymi do docelowego div.szablon obciążenia kątowego z adresu url i kompilacja wewnątrz div

Na przykład mam ten szablon:

<script type="text/ng-template"> 

    <img src="{{Thumb}}" /> 

<script> 

div który ma zawierać szablon:

<div data-ng-controller=" ... "></div> 

Szablon znajduje się gdzieś w folderze /templates/test.php. Czy istnieje sposób na ładowanie szablonów, tak jak robiłaby to dyrektywa, i skompilowanie go z niektórymi danymi, które zastąpiłyby klucz {{Thumb}} (i oczywiście wiele innych)?

EDIT: Co jeśli użyję $routes i załadować szablon, kiedy jestem w głównym stronie? Jak można to osiągnąć?

Odpowiedz

18

w kątowa tam 2 sposoby korzystania z szablonu (co najmniej 2 sposoby że wiem o):

  • pierwszym użyciu szablonu inline (w tym samym pliku) Za pomocą tej składni:

    <script type="text/ng-template"> 
        <img ng-src="{{thumb}}"> 
    </script> 
    
  • drugi (co chcesz) jest szablon zewnętrzny:

    <img ng-src="{{thumb}}"> 
    

więc co trzeba zrobić, to usunąć część skryptu z szablonu, a następnie użyć ng obejmują w poszukiwanych div jak to:

<div ng-include="'templates/test.php'"></div>

potrzebę posiadania cudzysłowów i apostrofów do praca. Mam nadzieję, że to pomoże.

+0

Wygląda na to, że działa.'{{Thumb}}' zostanie zastąpione tylko wartością, jeśli zdefiniuję kontroler i ustawię '$ scope.Thumb' na wartość. Ponadto mogę uzyskać '404' dla źródła obrazu {{Thumb}}', którego można uniknąć? – Roland

+0

umieścić przykład na [plnkr] (http://plnkr.co/edit/gist:3510140), dzięki czemu mogę cię lepiej zrozumieć. –

+0

Cóż, spójrz na przykład, który mają: http://docs.angularjs.org/api/ng.directive:ngView; W tej chwili konfiguruję to samo, ale dostaję przekierowanie, prawdopodobnie dlatego, że trasa nie pasuje do posiadanej lokalizacji? Mam go jako '$ routeProvider.when ('', { \t \t \t templateUrl: 'Szablony/vcard.php', \t \t \t kontroler: "VCardController" \t \t});' – Roland

2

Powiedzmy mam ten index.html:

<!doctype html> <html lang="en" ng-app="myApp"> 
     <body> 
      <script src="tpl/ng.menu.tpl" type="text/ng-template"></script> 
      <mainmenu></mainmenu>  
      <script src="lib/angular/angular.js"></script> 
      <script src="js/directives.js"></script> 
     </body> 
</html> 

I mam plik szablonu "tpl/ng.menu.tpl" tylko te 4 linie:

<ul class="menu"> 
    <li><a href="#/view1">view1</a></li> 
    <li><a href="#/view2">view2</a></li> 
</ul> 

Moi dyrektyw mapping "js/directives.js":

angular.module('myApp',['myApp.directives']); 
var myModule = angular.module('myApp.directives', []); 

myModule.directive('mainmenu', function() { 
    return { 
     restrict:'E', 
     replace:true, 
     templateUrl:'tpl/ng.menu.tpl' 
    } 
}); 
+0

Dowolny pomysł, dlaczego Angular widzi tylko zawartość wewnątrz znaczników '