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的{{1}}，如果它未定义，则会引发很多错误。让我疯狂的是，您可以看到param2输出console.log()，表示我的参数的[]应为0，并且输出后显示控制台上的错误console.log（）。

所以我想我错过了一些关于Angular绑定范围的方式或者指令构造的流程。我已尝试在.length和link阶段验证我的参数并遇到同样的问题。

那么，我在这里错过了什么？提前谢谢。

Answer 1

来自angular documentation（请参阅scope双向绑定部分）：

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

因此，使参数成为可选的解决方案是将绑定更改为与附加?的可选双向绑定。

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

Angular Directive

1 个答案: