Question

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

js：

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

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

Answer 1

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

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

使用最后一个指定可选属性，因此您不必传递它们（不是必需的）。

有关详细信息，请查看$compile here上的AngularJS文档。

TL; DR

=或= attr - 在本地范围属性和通过值定义的名称的父范围属性之间设置双向绑定 oftr属性。如果未指定attr名称，则为该属性假定name与本地名称相同。给定范围的小部件定义：{ localModel：'= myAttr'}，然后是widget范围属性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

=?是可选绑定。所以属性不是必需的

自定义指令参数声明差异

2 个答案: