angular-ui/ui-router, comment puis-je injecter vue partielle à l'aide de $stateProvider?

Je suis en train d'injecter un panneau pour le montage, en fonction de si le spectateur est le propriétaire, ou pas. Maintenant, je vais avoir du mal à simplement en injectant le panneau de configuration/vue partielle dans le code html. Je veux que mon compositions/views/view.html à la "base" de la page html, où l'partielle est injectée. Ensuite, la vue est à compositions/views/partials/views.tools.html. Parviendrez-vous à voir quelque chose de mal avec mon $stateProvider qui pourrait expliquer pourquoi je ne peut pas injecter mes partiels dans mon views.html?

Voici mon $stateProvider:

$stateProvider
        .state('all compositions', {
            url: '/compositions/recent',
            templateUrl: 'compositions/views/list.html'
        }). 
          state('view', {
                url: '/compositions/view/:compositionId',
                views: {
                'theTool':{
                 templateUrl:'compositions/views/partials/view.tool.html'   ,
                    controller: 'CompositionsController'
                }
                },
                templateUrl: 'compositions/views/view.html',
                controller: 'CompositionsController',

            }). //other states here

c'est mon balisage pour mon view.html (html principal)

<div ui-view="theTool"></div>
<section data-ng-controller="CompositionsController" data-ng-init="findOne()">
    <h2>{{composition.title}}</h2>
    <div ng-bind-html="trustedContent"></div>
</section>

L'aide ou des conseils est grandement apprécié. Grâce

quelle erreur obtenez-vous dans la console?
Je voudrais commencer par nettoyer cette double templateUrl et de contrôleur dans la vue " vue.'
Une directive qui conditionnellement a montré le panneau de l'éditeur serait probablement plus approprié.

OriginalL'auteur courtyen | 2014-07-23

11

Ici j'ai créé un exemple de travail, ce qui devrait donner toutes les réponses.

Ajusté de l'état définition est:
```
$stateProvider
  .state('allCompositions', {
    url: '/compositions/recent',
    templateUrl: 'compositions.views.list.html'
  }).

state('view', {
  url: '/compositions/view/:compositionId',
  views: {
    '': {
      templateUrl: 'compositions.views.view.html',
      controller: 'CompositionsController',
    },
    'theTool@view': {
      templateUrl: 'compositions.views.partials.view.tool.html',
      controller: 'CompositionsController'
    }
  },
```
le plus important est, que le compositions.views.view.html joue maintenant le rôle de cible pour le frère vue theTool. les deux points de vue sont définis sur le même état ('view'), mais l'un d'eux est injecté dans l'autre.

Également dans le index.html j'ai fait ce changement:
```

<div ui-view=""></div>
```
donc, maintenant, nous n'avons sans nom ui-view au lieu de le nommer. C'est pourquoi les deux états
- allCompostions
- vue
qui cible sans nom vue " sont maintenant bien rendu. Se plus ici, dans cette exemple

Plus sur les le point de vue de l'insertion de la logique:
- Afficher les Noms Relatifs et Absolus des Noms
petite cite:

Derrière les scènes, chaque vue est attribué un nom absolu qui suit un schéma de viewname@statename, où viewname est le nom utilisé dans l'affichage de la directive et nom de l'état est l'état absolu de nom, par exemple, communiquer avec.de l'élément. Vous pouvez également choisir d'écrire vos noms de vue dans l'absolu de la syntaxe.

Génial exemples à partir de la même source:
```
.state('contacts.detail', {
  views: {
    ////////////////////////////////////
    //Relative Targeting             //
    //Targets parent state ui-view's //
    ////////////////////////////////////

    //Relatively targets the 'detail' view in this state's parent state, 'contacts'.
    //<div ui-view='detail'/> within contacts.html
    "detail" : { },            

    //Relatively targets the unnamed view in this state's parent state, 'contacts'.
    //<div ui-view/> within contacts.html
    "" : { }, 

    ///////////////////////////////////////////////////////
    //Absolute Targeting using '@'                      //
    //Targets any view within this state or an ancestor //
    ///////////////////////////////////////////////////////

    //Absolutely targets the 'info' view in this state, 'contacts.detail'.
    //<div ui-view='info'/> within contacts.detail.html
    "[email protected]" : { }

    //Absolutely targets the 'detail' view in the 'contacts' state.
    //<div ui-view='detail'/> within contacts.html
    "detail@contacts" : { }

    //Absolutely targets the unnamed view in parent 'contacts' state.
    //<div ui-view/> within contacts.html
    "@contacts" : { }
```
Merci beaucoup pour les détails du problème et retour rapide. Cela a été utile, mais je suis encore confus sur un certain nombre de choses. Pourquoi avez-vous changé le templateUrl chemin '.' au lieu de '/'? Je suis redirigé chaque fois que je vais à /compositions/view/15 /compositions/récentes, ce qui est étrange parce que je n'ai pas l'ajout d'une redirection. J'ai vu la config sur plunker et ne comprend pas..
Difficile de dire quelle est la cause de la redirection... mais le plunker travaille, donc essayez d'utiliser des pièces de... et les choses devraient fonctionner. Ce qui est récent? Si vous étendez la question et je vais être en mesure pour vous aider...
D'accord! Il fonctionne! Merci Beaucoup SOO!!! Il est incroyable. Le problème avec la redirection a été que j'ai fait une erreur 404 avec mon template principal. J'ai essayé de renommer certains fichiers et je l'ai supprimé. Après j'ai restauré, il a travaillé.
Génial! Bonne chance avec ui-router, outil étonnant 😉

OriginalL'auteur Radim Köhler

Vous devez vous connecter pour publier un commentaire.