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

Question

Я создал директиву по угловому, который получает 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, и если это не определено, что выбрасывает много ошибок. Что меня заводит, так это то, что в console.log() вы видите [], что указывает на то, что .length моего параметра должен быть 0, а ошибки на консоли отображаются после выхода на консоль.log().

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

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

Answer 1

Из angular documentation (смотрите раздел для связывания scope двунаправленных):

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

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

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