Angular Directive上的可选参数

Question

我在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,如果它是不确定的,它抛出了很多错误.让我疯狂的是,console.log()你可以看到那里的输出a [],表明.length我的param应该是0,并且在console.log()输出后显示控制台上的错误.

所以我想我错过了Angular绑定范围的方式或指令构造的流程.我曾尝试verifing我的两个PARAM link和compile阶段,并得到了同样的问题.

那么,我在这里错过了什么？提前致谢.

Answer 1

从角度文档(参见scope双向绑定部分):

=或=attr- 在本地作用域属性和通过attr属性的值定义的名称的父作用域属性之间设置双向绑定.如果父作用域属性不存在,则会抛出NON_ASSIGNABLE_MODEL_EXPRESSION异常.您可以使用=?或=?attr为了将属性标记为可选来避免此行为.

因此,使参数可选的解决方案是将绑定更改为可选的双向绑定?.

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