Parametro opzionale sulla direttiva angolare

Question

Ho creato una direttiva su Angular che riceve 5 parametri e uno di questi è un array opzionale. Il modo in cui sto cercando di affrontare è come segue:

app.directive('fooDirective', function() { 
    return { 
     restrict: 'AE', 
     scope: { 
      param1: '=', 
      param2: '=' // optional array 
     }, 
     template: //... 
       "<div ng-class='defineClass()'> Message </div>" 
        //... 
     controller: function($scope) { 

      if (typeof $scope.param2 === 'undefined') 
        $scope.param2 = []; 

      console.log($scope.param2); 

      $scope.defineClass = function() { 
        if ($scope.param2.length == 0) return 'gray-text'; 
        return 'red-text'; 
      }; 

      // ...... 
     } 
    } 
}); 

Ad un certo punto nel mio codice ho assegno per il .length di param2 e se non è definito che getta un sacco di errori. Quello che mi sta facendo impazzire è che il console.log() che si vede lì emette un [], indicando che il .length del mio param dovrebbe essere 0 e gli errori sulla console sono mostrati dopo l'output di console.log().

Quindi penso che mi manchi qualcosa sul modo in cui Angular lega gli ambiti o il flusso che la direttiva è costruita. Ho provato a verificare il mio parametro su entrambe le fasi link e compile e ho avuto lo stesso problema.

Quindi, cosa mi manca qui? Grazie in anticipo.

Answer 1

Dal angular documentation (vedi la sezione per il legame scope bidirezionale):

= o =attr - istituire bidirezionale di legame tra una proprietà ambito locale e la proprietà ambito padre di nome definito attraverso il valore dell'attributo attr .... Se la proprietà dell'ambito genitore non esiste, genererà un'eccezione NON_ASSIGNABLE_MODEL_EXPRESSION. È possibile evitare questo comportamento utilizzando =? o =?attr per contrassegnare la proprietà come facoltativa.

Quindi la soluzione per rendere facoltativo il parametro consiste nel modificare il binding in modo che sia un collegamento bidirezionale opzionale con l'ulteriore ?.

... 
scope: { 
    param1: '=', 
    param2: '=?' // notice the ? makes this parameter optional. 
}, 
...