自定义指令参数声明差异

Question

我想知道以以下三种方式声明自定义指令参数之间的区别：

js：

app.directive('customDirective', function() {
    return {
        restrict: 'E',
        scope : {
            x  :  '=',
            y  :  '=y',
            z  :  '=?'
        } , 
    }     
});

我正在监视三个似乎相同的行为。
有人可以帮忙吗？

Answer 1

第一个是通常的双向数据绑定，这意味着如果您说x : '='元素上的属性也必须也是x 。

第二个是第一个的替代方案，不同之处在于您可以将范围变量映射到另一个属性。 例如，您可以说y: '=foo' 。 这会将属性foo映射到y 。

在最后一个参数中，您可以指定可选属性，因此不必传递它们（不需要）。

有关更多信息，请在AngularJS文档$compile 这里 。

TL; DR

=或= attr-在本地范围属性和通过attr属性的值定义的名称的父范围属性之间建立双向绑定。 如果未指定attr名称，则假定属性名称与本地名称相同。 给定范围的小部件定义：{localModel：'= myAttr'}，则小部件范围属性localModel将在父范围上反映parentModel的值。 对parentModel的任何更改都将反映在localModel中，对localModel的任何更改都将反映在parentModel中。 如果父范围属性不存在，它将抛出NON_ASSIGNABLE_MODEL_EXPRESSION异常。 您可以使用=来避免此行为。 或=？attr以便将该属性标记为可选。 如果要浅谈更改（即$ watchCollection而不是$ watch），则可以使用= *或= attr（如果属性为可选，则为= ？或= *？attr）。

编辑：我认为文档已过时，因为该异常似乎仅在$compile源的较旧版本中引发。 在AngularJS的较新版本中，不存在的必需范围属性将是undefined 。

编辑2：正如我之前提到的那样，较新版本的Angular不会再抛出NON_ASSIGNABLE_MODEL_EXPRESSION异常，只要您尝试将值分配给未在元素上定义的可选属性，您仍然会收到错误消息。

Answer 2

=和=y相同。 您可以定义不同的范围和html属性名称，例如

scope:{
  a: '=b'
}

这样，您就可以将html属性b绑定到范围值a

=? 是一个可选的绑定。 因此该属性不是必需的