Angular JS, czy możliwe jest dynamiczne ustawienie ng-include lub ng-controller?

Jestem nowy w Angular JS i poprzez badania wygląda na to, że nie jest to możliwe, ale chciałem dokładnie sprawdzić/sprawdzić, czy istnieje jakieś alternatywne rozwiązanie, które będzie miało podobny skutek.Angular JS, czy możliwe jest dynamiczne ustawienie ng-include lub ng-controller?

To, co chcę zrobić, to zapełnić stronę z pliku JSON i załadować niestandardowe li za pomocą adresu URL, który byłby w tym pliku JSON. więc coś takiego:

JSON/kontroler wewnątrz:

function ExCtrl($scope) { 

    $scope.examples = [ 
      {name:"example", 
      num: 1, 
      url:"website.html"} 
     ]; 
    }

JS (wewnątrz JS)

<ul ng-controller="ExCtrl"> 
    <li ng-repeat="example in examples"> 
     <div ng-include src="folder/{{example.url}}> </div> 
    </li> 
</ul>

Rozwiązanie:

<ul ng-controller="ExCtrl"> 
    <li ng-repeat="example in examples"> 
     <div ng-include src="example.url"> </div> 
    </li> 
</ul>

gdzie jest teraz:

function ExCtrl($scope) { 

    $scope.examples = [ 
      {name:"example", 
      num: 1, 
      url:"folder/website.html"} 
     ]; 
    }

Źródło

2013-05-13 Alex

z dokumentacji:

ngInclude|src - {string} - kanciasty wyrażenie oceny do adresu URL. Jeśli źródłem jest stała łańcuchowa, upewnij się, że zawijasz ją w cudzysłów, np. src="'myPartialTemplate.html'".

W twoim przypadku sensowne jest ustawienie niestandardowego zasobu ngResource. W kontrolerze wstrzyknij zasób i zapytanie dla JSON, a następnie przypisz JSON do zmiennej zasięgu.

angular.module("foo", "ngResource") 

    .factory("ResourceType", function($resource){ 
    return $resource("/resourcetype/:id", {id: "@id"}, { "update": {method:"PUT"}}); 
    }) 
    .controller("ExCtrl" function($scope, ResourceType){ 
    $scope.examples = ResourceType.query(); 
    });

Następnie należy ustawić adres URL ng-include podczas zapętlania zasobu.

Również nie {{}} swojej nazwy zmiennej.

EDIT:

miałem zamiar dać Plunker, ale wydaje się działać w górę. Oto wbudowane źródło, które robi to, co chcesz. Ze względu na jasność usunąłem fragment zasobu. Wyobrażam sobie, że będziesz chciał go odłożyć, gdy zdecydujesz się zdalnie pobrać JSON.

<!DOCTYPE html> 
<html ng-app="angularjs-starter"> 

    <head lang="en"> 
    <meta charset="utf-8"> 
    <title>Custom Plunker</title> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script> 
    <script src="app.js"></script> 
    </head> 

    <body ng-controller="MainCtrl"> 
    <ul ng-controller="MainCtrl"> 
     <li ng-repeat="example in examples"> 
     If {{example.url}} were valid, it would load in the div. 
     <div ng-include="example.url"> </div> 
     </li> 
    </ul> 
    </body> 
</html> 

var app = angular.module('angularjs-starter', []); 

app.controller('MainCtrl', function($scope) { 
    $scope.examples = [ 
    {name:"example", 
     num: 1, 
     url:"example.html"} 
    ]; 
});

Edit: Plunk

http://beta.plnkr.co/edit/JNhqoJoykWKf4iqV0ieJ?p=preview

Źródło

2013-05-13 18:19:53 kelf

Przepraszam jestem bardzo nowy w tym i mam problemy z rozszyfrowaniem co każda część tej funkcji robi lub jego celem jako całości. Czy jest to funkcja, która ustawia adres URL od kontrolera? – Alex

Zaktualizowałem moje pytanie, aby lepiej odzwierciedlało to, czym jest mój obecny system, jeśli to pomaga .. Jestem w stanie go poprawnie rozwiązać, teraz mam na myśli ng-include src = "example.html" zamiast przykładu. adres URL, ale go nie załadował? – Alex

Dziękuję, to dla mnie łatwiejsze do naśladowania - jednak kiedy piszę po prostu ng-include = "example.url", ostateczny wynik to nadal ng-include = "example.url" :(nie ocenia do niczego – Alex

Angular JS, czy możliwe jest dynamiczne ustawienie ng-include lub ng-controller?

Odpowiedz

Powiązane problemy