Opcjonalny parametr dyrektywy kątowej

Question

Utworzono dyrektywę dotyczącą Angular, która przyjmuje 5 parametrów, a jedną z nich jest opcjonalna tablica. Sposób Próbuję sobie z nim jest jak następuje:

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'; 
      }; 

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

W pewnym momencie mogę sprawdzić na .length z param2 mojego kodu, a jeśli to nie jest zdefiniowana rzuca dużo błędów. Co mnie podnieca to to, że console.log(), który widzisz, generuje [], co oznacza, że ​​.length mojego parametru powinien mieć wartość 0, a błędy na konsoli są wyświetlane po wyjściu z pliku console.log().

Sądzę więc, że brakuje mi czegoś o sposobie, w jaki Angular wiąże zakresy lub przepływ, w jaki konstruowana jest dyrektywa. Próbowałem sprawdzić mój param na obu fazach link i i mam ten sam problem.

Więc czego tu brakuje? Z góry dziękuję.

Answer 1

Z angular documentation (patrz rozdział o wiązanie scope dwukierunkowy):

= lub =attr - ustanawiania dwukierunkowej wiązania pomiędzy lokalnym własności zakres i właściwości zakres dominującej nazwy ustalone przy pomocy wartość atrybutu attr .... Jeśli właściwość zasięgu nadrzędnego nie istnieje, zostanie zgłoszony wyjątek NON_ASSIGNABLE_MODEL_EXPRESSION. Możesz tego uniknąć, używając =? lub =?attr, aby oznaczyć właściwość jako opcjonalną.

Rozwiązaniem, które sprawia, że ​​parametr jest opcjonalny, jest zmiana wiązania jako opcjonalnego wiązania dwukierunkowego z dodatkowym ?.

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