2013-05-17 5 views
6

Sto pensando che questo dovrebbe essere semplice ma mi manca qualcosa. Come posso passare uno flowObj nel mio ng-repeat di seguito alla mia direttiva? Voglio passarlo alla mia direttiva, quindi al momento del clic utilizzare FlowObj quindi applicare una logica. Ho provato ad usare il codice commentato nella mia direttivaAngularJs passa l'istanza di ogni ng-repeat in HTML alla direttiva

scope: { 
    test:"@" 
} 

Ma sembra rovinare il mio css.

HTML:

<html> 
    <head> 
     <title></title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    </head> 
    <body> 
      <div id="center_outer"> 
       <div id="center_inner" ng-controller="CtrlPageFlow"> 
        <div flowclick class="cflow" ng-repeat="flowObj in flows" > 
         {{flowObj.name}} 
        </div> 
       </div> 
      </div> 
    </body> 
</html> 

Qui è la mia direttiva

angular.module('directives', ['opsimut']).directive('flowclick', function() { 
    return { 
     /* 
     scope: { 
      test:"@" // set the attribute name on the directive's scope 
     }, 
     */ 
     link: function(scope, elem, attr) { 
      elem.bind('click', function(scope) { 
       debugger; 
       alert(scope.flowObj); 
       //scope.name += '!'; 
       //scope.$apply(); 
      }); 
     } 
    }; 
}); 

soluzione basata su RISPOSTA:

angular.module('directives', ['opsimut']). 
    directive('flowclick', function() { 


     return { 



        link: function(e, elem, attr) { 
        // scope is the directive's scope, 
        // elem is a jquery lite (or jquery full) object for the directive root element. 
        // attr is a dictionary of attributes on the directive element. 
        elem.bind('click', function(e1) { 

         debugger; 

         alert(e.flowObj); 


        },e); 
        } 
     }; 


    }); 

risposta

7

SOLUZIONE: rimuovere l'intera scope proprietà dalla direttiva e tutto dovrebbe funzionare come exp ette.

ANCHE: Avrete bisogno di rinominare l'argomento scope da questa linea:

elem.bind('click', function(scope) { 

a qualcosa di simile:

elem.bind('click', function(e) { 

perché si sta sovrascrivendo l'accesso al scope nel vostro evento gestore usando lo stesso nome.

SPIEGAZIONE:

La direttiva ng-repeat provoca ciascuno dei suoi cloni di avere un proprio nuovo ambito. Poiché le direttive su un elemento condividono l'ambito per impostazione predefinita, qualsiasi altra direttiva collocata accanto allo ng-repeat condivide il suo ambito e ha accesso alle variabili $scope dell'iterazione corrente. In altre parole, la direttiva personalizzata condivide già lo scope con ng-repeat e ha accesso a flowObj per impostazione predefinita.

Il motivo per cui non ha funzionato quando si specifica una proprietà scope sulla direttiva personalizzato è che questo ha causato la direttiva di avere il proprio ambito isolato che non condividere con ng-repeat e quindi non ha avuto accesso alle variabili sui cloni 'ambiti.

Problemi correlati