3

i have this code:

<div class="mdl-cell mdl-cell--5-col mdl-shadow--4dp" style="margin-bottom:0;" ng-show="sub.view == 'fundoCaixa'">
    <div ng-if="sub.view=='fundoCaixa'" ng-controller="vender-fundoCaixa">
        <div ng-include="'views/vender/fundoCaixa.html'"></div>
    </div>
</div>

<div class="mdl-cell mdl-cell--5-col mdl-shadow--4dp" style="margin-bottom:0;" ng-show="sub.view == 'sangria'">
    <div ng-if="sub.view=='sangria'" ng-controller="vender-sangria">
        <div ng-include="'views/vender/sangria.html'"></div>
    </div>
</div>

<div class="mdl-cell mdl-cell--5-col mdl-shadow--4dp" style="margin-bottom:0;" ng-show="sub.view == 'apelido'">
    <div ng-if="sub.view=='apelido'" ng-controller="vender-apelido">
        <div ng-include="'views/vender/apelido.html'"></div>
    </div>
</div>

but if you see it is the same rule for all subviews, i need reuse it, how can i do it?

<div class="mdl-cell mdl-cell--5-col mdl-shadow--4dp" style="margin-bottom:0;" ng-show="sub.view == '$var_here'">
    <div ng-if="sub.view=='$var_here'" ng-controller="$var_here">
        <div ng-include="'views/vender/$var_here.html'"></div>
    </div>
</div>

where there is $var_here change to context to load.

Thanks for all!

Lucas Argate
  • 329
  • 2
  • 11
  • Have you tried using directives? You can write three directives and use transclude for reusing the same html code. Small update: you won't even need transclude, as I see it. Just one
    with three directives under different ng-if conditions would be enough.
     – AmeRyoki Dec 27 '16 at 13:45
  • i will try use directive – Lucas Argate Dec 27 '16 at 15:16
  • look, it works in parts. Now the problem is: the controller cant be loaded dynamically, im following [link](http://stackoverflow.com/questions/24762229/dynamic-ng-controller-name?answertab=votes#tab-top) and the controller is not called. – Lucas Argate Dec 27 '16 at 17:52

1 Answers1

1

You don't need to use dynamic controllers. Put your code into directives with templates. Your code could look like this (for example): 

<div class="mdl-cell mdl-cell--5-col mdl-shadow--4dp" style="margin-bottom:0;" ng-show="sub.view == '$var_here'">
  <fundo-caixa ng-if="ctrl.fundoCaixa"></fundo-caixa>
  <sangria ng-if="ctrl.sangria"></sangria>
  <apelido ng-if="ctrl.apelido"></apelido>
</div>

Each directive will have its own controller (so no need in assigning them dynamically) plus template url, so that eliminates ng-include. You can experiment with how you want to use ng-if. Do you want to use three different variables and assign them true/false in the controller, or do the check like you had in your example.

AmeRyoki
  • 376
  • 1
  • 3
  • 14
  • Look, my problem is show dynamic view with dynamic controller, because i need a separated controller context. "sagria" is one context, "apelido" is other context. I need do while with this information. – Lucas Argate Jan 10 '17 at 17:23
  • You have a parent controller for the whole view. And each directive can have a controller with own logic which gives you separated context. If needed you can set up communication with those two by passing parameters. – AmeRyoki Jan 11 '17 at 07:32
  • I might not completely understand what you need to achieve and if there is any other reason to load your controllers dynamically than making code optimization for these three contexts. Do you want to make some configuration file for listing controllers and assigning them automatically? Or is it enough just to load one of them depending on condition? If you plan to use just three options in one view, there is really no need to over complicate things. – AmeRyoki Jan 11 '17 at 08:51