Modifier dynamiquement le contenu de la div à l'aide de balises d'ancrage angulaire

Je vais avoir un problème sur la façon de charger un point de vue dynamique en utilisant Angularjs dans les balises d'ancrage. Par la façon dont je ne peux pas utiliser ng-vue depuis ng-view ne peut être utilisée qu'une fois dans un modèle. Donc, je suis en train de penser à l'aide de la ng-src, mais sur l'exemple de docs c'est à l'aide d'une sélection de balise de l'élément et de l'extraction de ses valeurs sur les contrôleurs. Ce que je veux, c'est quand je clique sur un lien dire la Vue1, le contenu de mon div va changer. Je vais l'expliquer plus loin.

Dire que j'ai ces 3 balises d'ancrage

<li><a href="#/view1">View1</a></li>
<li><a href="#/view2">View2</a></li>
<li><a href="#/view3">View3</a></li>

Avant

 <div data-ng-include="" data-ng-src="default.html"></div>

Maintenant quand je clique sur #/vue1

 //the ng-src of the html will change depending on the link clicked
 <div data-ng-include="" data-ng-src="view1.html"></div>
ng-view fait de même. Lire la documentation sur $route et $routeProvider.
Je ne peux pas utiliser plus de la ng-view depuis que je l'ai déjà utilisé sur mon autre des vues partielles. Je pense que ng-view ne peut être utilisée qu'une fois pour chaque modèle. droit?
ng-src est généralement attribuée à un img tag. Vous êtes à la recherche pour ng-include?
oui, je suis en train de penser à l'aide de ng-inclure l'atteindre d'un point de vue dynamique tout comme ng-view. Ne sais pas comment la mettre en œuvre si l'utilisation angulaire T__T
Oups! Je n'ai pas de lire attentivement la question. Vous pouvez prendre un coup d'oeil à ma réponse donnée ci-dessous.

OriginalL'auteur Wondering Coder | 2013-08-14

  1. 6

    Peut-être que vous essayez de faire quelque chose comme ci-dessous:

    HTML:

    <!-- Dont use # in the hrefs to stop the template from reloading -->
<li><a href="" ng-click="selectedTemplate.path = 'view1.html'">View1</a></li>
<li><a href="" ng-click="selectedTemplate.path = 'view2.html'">View2</a></li>
<li><a href="" ng-click="selectedTemplate.path = 'view3.html'">View3</a></li>

<div data-ng-include="selectedTemplate.path"></div>

    JS:

    $scope.selectedTemplate = {
    "path":"view1.html"
};
    Il n'est même pas nécessaire d'avoir le JS si vous ne voulez pas un contrôleur. Le selectedTemplate.path va ajouter à la portée actuelle. jsfiddle.net/davintryon/sL7Lm
    Je pense que le JS est important dans le cas où vous disposez de tous les lis au sein de ng-repeat ou quelque chose qui serait de créer un champ d'application différent.
    Vrai, juste un commentaire qu'il fonctionnera sans il pour les cas simples.

    OriginalL'auteur AlwaysALearner

  2. 1

    ng-view est la vue principale de toute Angulaire de l'app, et est affectée par les changements de route. Donc tout ce que vous ancrage des balises n'affecte que la ng-modèle de vue.

    Pour charger d'autres vues partielles sur la base des principales ng-view, ng-inclure est la bonne façon de procéder comme vous l'avez déjà mentionné.

    Pour charger une vue basée sur la vue principale (affichage montré dans la ng-view), vous devez écrire la logique de mapping qui en fonction de la vue principale doit se charger d'autres partiels (ng-inclure des éléments de la page).

    De sorte que votre partielles devient comme

    <div data-ng-include='templateNameVariable'></div>

    Cette variable doit être définie lorsque la ng-les changements de vue sur le changement d'emplacement.

    Vous pouvez regarder pour $route $routeChangeSuccess de l'événement et de changer le templateNameVariable basée sur l'itinéraire actif (d'où le point de vue).

    Donc il devrait y avoir un contrôleur à côté de la ng-view de la directive qui va orchestrer cela, et vous ne

    $scope.$on('$routeChangeSuccess',function(event,current,previous) {
     //Change the templateNameVariable to point to correct template here, based on current route.
});

    OriginalL'auteur Chandermani