2013-03-15 15 views
12

Ho una direttiva che crea un campo di input. Devo impostare l'attributo ng-model di questo campo di input sul valore di una variabile $ rootScope . La ragione di ciò è che voglio che il campo di input sia nel layout e che si colleghi a modelli diversi a seconda della pagina caricata. Ho pensato di impostare questa variabile globale in ogni controller e accedervi nella direttiva.

ATM la variabile è programmato

App.run(function($rootScope){ 
    $rootScope.mymodel = 'search.name'; 
}) 

E direttiva

Directives.directive('inputFilter', function(){ 
    return{ 
     restrict: 'E', 
     replace:true, 
     controller: function($scope, $rootScope){ 
      console.log($scope.mymodel); 
      console.log($rootScope.mymodel) 

     }, 
     template: '<input class="filter" type="text" ng-model="mymodel" placeholder="Nach filtern">' 
    } 

}); 

Essa viene reso come

<input class="filter ng-pristine ng-valid" type="text" ng-model="mymodel" placeholder="Filter"> 

e il testo all'interno del campo di ingresso è il valore di MyModel variabile. Il file console.log mostra

search.name 
search.name 

Qualcuno potrebbe per favore fare luce su questo problema?

+0

potrebbe anche dare un'occhiata a riferimento $ radici nel modello che contiene un riferimento a $ rootScope nelle direttive che hanno il loro campo di applicazione. Vedi - http://stackoverflow.com/questions/22216441/quello-è-la-differenza-tra-scope-root-and-rootscope – cchamberlain

risposta

13

Quello che penso invece si è

template: '<input class="filter" type="text" ng-model="' 
    + $rootScope.mymodel + '" placeholder="Nach filtern">' 

Fiddle.

Nota che sarà necessario iniettare nel vostro $rootScope direttiva:

Directives.directive('inputFilter', function($rootScope) { 
+0

qualche idea del perché il valore della variabile viene mostrato se cambio il modello in questo modo? http://jsfiddle.net/ZavXw/1/ – glasspill

+0

qual è la differenza tra ng-model = "{{mymodel}}" e placeholder = "{{mymodel}}" – glasspill

+0

1. Il tuo violino: {{}} dice Angolare per interpolare il valore. Poiché l'ambito del controller eredita prototipicamente da $ rootScope, Angular sostituisce '{{mymodel}}' con il valore interpolato di 'search.name'. 2. Non è possibile utilizzare {{}} all'interno di ng-model perché Angular non interpolerà i valori del modello ng. Il valore del modello ng deve essere un'espressione angolare (assegnabile). (Allo stesso modo, il valore di ng-click non può contenere {{}} s - deve anche essere un'espressione angolare). Il valore del segnaposto può contenere {{}} perché il compilatore Angolare lo noterà e lo interpolerà. –

Problemi correlati