Необязательный параметр в директиве Angular

Я создал директиву на Angular, который получает 5 параметров, и один из них является необязательным массивом. То, как я пытаюсь справиться с этим, выглядит следующим образом:

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

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

В какой-то момент в моем коде я проверяю .length param2, а если он undefined, он выдает много ошибок. Что меня заводит, так это то, что console.log(), который вы видите там, выводит [], указывая, что .length моего параметра должен быть 0, а ошибки на консоли показаны после выхода на консоль .log().

Итак, я думаю, что я пропускаю что-то о том, как Angular связывает области или поток, который создается в директиве. Я попытался проверить свой параметр на фазах link и compile и получил ту же проблему.

Итак, что мне здесь не хватает? Спасибо заранее.

Ответ 1

Из angular документации (см. раздел для двунаправленного привязки scope):

= или =attr - установить двунаправленную привязку между локальным свойством scope и свойством родительской области имени, определяемым значением атрибута attr.... Если свойство родительской области не существует, оно выдает исключение NON_ASSIGNABLE_MODEL_EXPRESSION. Вы можете избежать этого поведения, используя =? или =?attr, чтобы пометить свойство как необязательное.

Таким образом, решение сделать необязательный параметр - изменить привязку как необязательную двустороннюю привязку с дополнительным ?.

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