Question

我一直在阅读AngularJS文档并发现了一些我仍然不了解的内容：

对于属性名称与所需值相同的情况要绑定到指令范围内，您可以使用此简写语法：

...
scope: {
  // same as '=customer'
  customer: '='
},
...

查看最后一个示例（my-tabs / my-pane），代码就是这个：

.directive('myPane', function() {
  return {
    require: '^myTabs',
    restrict: 'E',
    transclude: true,
    scope: {
      title: '@'
    },
    link: function(scope, element, attrs, tabsCtrl) {
      tabsCtrl.addPane(scope);
    },
    templateUrl: 'my-pane.html'
  };
});

我尝试将'@'更改为'='，示例中断了。那么做什么'@'？为什么'=' '=title'都没有在这里工作？

Answer 1

当您使用=时，您正在指定父作用域的属性与将在指令的作用域上创建的属性之间的双向绑定。这意味着属性的值通常是与父作用域上的属性匹配的标识符。

使用@时，您正在指定单向绑定。结果将始终是一个字符串。对指令范围的属性的更改不会影响父范围（因为该模型不是对父范围属性的引用）。

在您的示例中，title属性是文字字符串，而不是对父作用域上的属性的引用。当您将@更改为=时，它会中断，因为父作用域上没有正确名称的属性。

这是在$compile service。

下记录的

Answer 2

在AngularJs指令中，

隔离范围变量可以用三种方式声明

@这会将参数作为字符串，即使它是一个Object / Array / Function
=将绑定两种方式，因此您可以在指令中获取Object / Array / Function，并且指令内的更改将反映在原始/父范围中
&将以一种方式绑定，您可以在指令中获取属性的值（即Object / Array / Function），但如果更改该值，则不会更改该属性的值父范围

如果情况2,3：如果你没有在父范围内定义变量，它们将是undefined，所以要正确定义它们。

选项3：是单向的，所以这是将回调函数绑定到指令的好方法。

Answer 3

您可以查看compile documentation 所有三种情况都有解释：

@或@attr - 将本地范围属性绑定到DOM的值属性。由于DOM属性，结果总是一个字符串字符串。如果未指定attr名称，则属性名称为假设与本地名称相同。范围的给定和小部件定义：{localName：＆＃39; @ myAttr＆＃39; }，那么widget作用域属性localName将反映插值 hello {{name}}的值。由于名称属性发生了变化，因此小部件范围上的localName属性。该名称是从父范围（不是组件范围）。

因此，在这种情况下，title是属性，而不是变量。

AngularJS指令

3 个答案: