具有范围的 Angular 指令：@ 不起作用答案

【问题标题】：Angular directive with scope : @ not working具有范围的 Angular 指令：@ 不起作用
【发布时间】：2016-03-14 03:15:03
【问题描述】：

这是我的指令代码，可以正常工作：

.directive('myGrid',function(){
return {
  restrict:'E',
  scope:{
    info:'=info'
  },
  templateUrl : '/directiveGrid.html'
}

})

这是codepen demo

但如果我改变范围：

    .directive('myGrid',function(){
    return {
      restrict:'E',
      scope:{
        info:'@info'
      },
      templateUrl : '/directiveGrid.html'
    }
  })

它不起作用。这是第二个demo

【问题讨论】：

'=' 提供两种方式绑定，而 '@' 只传递一个字符串值。它们是不同的。

标签： angularjs angularjs-directive

【解决方案1】：

问题是当您使用@ 进行隔离范围绑定时，它会将值从属性传递到指令。基本上在使用@ 传递值时stringify 传递该值并在将其传递给指令之前。所以转到指令的值不是JSON 格式，它在到达指令之前被字符串化（数据类型更改为string）。

如果您执行{{info}}，您将看到结果（不过是string）。它已被转换为字符串，这就是您看不到 ng-repear 工作的原因

首选方法是使用 =，它会做两件事

双向绑定
当值传递给指令时，它会保留值的数据类型。

【讨论】：

【解决方案2】：

这里有一些解释：

@ 将本地/指令范围属性绑定到 DOM 属性的评估值。由于属性值始终是字符串，因此在使用 @ 时，您将始终在指令范围内得到该属性的字符串值。

@ 允许将指令属性上定义的值传递给指令的隔离范围。

= 将本地/指令范围属性绑定到父范围属性。因此，使用 =，您可以使用父模型/范围属性名称作为 DOM 属性的值。您不能将 {{}} 与 = 一起使用。

= 在指令的隔离范围和父范围之间设置双向绑定表达式。子范围内的更改并传播到父级，反之亦然。将 = 视为 @ 和 & 的组合。 = 的截屏在这里：https://egghead.io/lessons/angularjs-isolate-scope-two-way-binding

是的，双向绑定 (=) 允许本地/指令范围和父范围共享数据。 “表达式绑定”允许指令调用由 DOM 属性定义的表达式（或函数）——您还可以将数据作为参数传递给表达式或函数。因此，如果您不需要与父级共享数据——您只想调用在父级范围内定义的函数——您可以使用 & 语法。

【讨论】：