AngularJS中指令范围内的'@'和'='有什么区别？

Question

我仔细阅读了关于该主题的AngularJS文档，然后使用指令进行了调整。这是fiddle。

以下是一些相关的片段：

来自HTML： <pane bi-title="title" title="{{title}}">{{text}}</pane>
从窗格指令： scope: { biTitle: '=', title: '@', bar: '=' },

我有几件事没有得到：

为什么我必须使用"{{title}}"与'@'和"title"与'='？
我是否也可以直接访问父作用域，而无需使用属性装饰我的元素？
文档说“通常需要通过表达式将数据从隔离范围传递到父范围”，但这似乎也适用于双向绑定。为什么表达路线会更好？

我找到了另一个显示表达式解决方案的小提琴：http://jsfiddle.net/maxisam/QrCXh/

Answer 1

为什么我必须将“{{title}}”与“@”和“title”与“=”一起使用？

@将本地/指令范围属性绑定到DOM属性的计算值。如果你使用title=title1或title="title1"，DOM属性“title”的值只是字符串title1。如果使用title="{{title}}"，则DOM属性“title”的值是{{title}}的插值，因此该字符串将是父范围属性“title”当前设置的任何值。由于属性值始终是字符串，因此在使用@时，您将始终在指令范围内以此属性的字符串值结束。

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

使用@，你可以做像title="{{title}} and then some"这样的事情 - {{title}}被内插，然后字符串“和它们一些”被连接起来。最终的连接字符串是本地/指令范围属性获取的内容。（你不能用=，只做@。）

使用@，如果需要使用link（ing）函数中的值，则需要使用attr.$observe('title', function(value) { ... })。例如，if(scope.title == "...")不会像你期望的那样工作。请注意，这意味着您只能访问此属性asynchronously。如果仅使用模板中的值，则不需要使用$ observe（）。例如，template: '<div>{{title}}</div>'。

使用=，您不需要使用$ observe。

我是否也可以直接访问父作用域，而无需使用属性装饰我的元素？

是的，但仅限于您不使用隔离范围。从指令中删除此行

scope: { ... }

然后你的指令不会创建一个新的范围。它将使用父范围。然后，您可以直接访问所有父作用域属性。

文档说“通常需要通过表达式将数据从隔离范围传递到父范围”，但这似乎也适用于双向绑定。为什么表达路线会更好？

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

也可以看看

Lukas's isolated scope blog post（涵盖@，=，＆）
@和=的dnc253's explanation
关于范围的my blog-like answer - 指令部分（底部的方式，就在Summary部分之前）有一个隔离范围及其父范围的图片 - 指令范围使用@表示一个属性而=表示另一个属性
What is the difference between & vs @ and = in angularJS

Answer 2

即使范围是本地的，如在您的示例中，您也可以通过属性$parent访问父范围。假设在下面的代码中，title是在父作用域上定义的。然后您可以访问标题为$parent.title：

link : function(scope) { console.log(scope.$parent.title) },
template : "the parent has the title {{$parent.title}}"

但是在大多数情况下，使用属性可以更好地获得相同的效果

我找到“＆”符号的一个例子，用于“通过表达式将数据从隔离范围传递到父范围”，有用（并且不能使用双向数据绑定）在指令中用于在ng-repeat内部渲染特殊的数据结构。

<render data = "record" deleteFunction = "dataList.splice($index,1)" ng-repeat = "record in dataList" > </render>

渲染的一部分是删除按钮，这里通过＆附加来自外部范围的删除功能很有用。在render-directive里面看起来像

scope : { data = "=", deleteFunction = "&"},
template : "... <button ng-click = "deleteFunction()"></button>"

双向数据绑定，即data = "="不能使用，因为删除函数将在每个$digest循环上运行，这是不好的，因为记录然后立即被删除并且从未呈现。

Answer 3

@ local scope属性用于访问在指令外定义的字符串值。

=如果需要在外部作用域和指令的隔离作用域之间创建双向绑定，则可以使用=字符。

＆local scope属性允许指令的使用者传入指令可以调用的函数。

请查看以下链接，通过示例清楚地了解它。我发现它非常有用，所以想分享它。

http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-2-isolate-scope

Answer 4

我在小提琴中实现了所有可能的选项。

它涉及所有选项：

scope:{
    name:'&'
},

scope:{
    name:'='
},

scope:{
    name:'@'
},

scope:{

},

scope:true,

https://jsfiddle.net/rishulmatta/v7xf2ujm

Answer 5

他们之间的主要区别就是

@ Attribute string binding
= Two-way model binding
& Callback method binding

Answer 6

这个问题已经被打死了，但无论如何我都会分享这个问题，以防其他人在与AngularJS范围的可怕混乱中挣扎。这将涵盖=，<，@，&和::。完整的写作可以找到here。

=建立双向约束。更改父级中的属性将导致子级更改，反之亦然。

<建立了单向约束，父母对孩子。更改父级中的属性将导致子级更改，但更改子属性不会影响父级属性。

@将为子属性分配tag属性的字符串值。如果属性包含expression，则只要表达式求值为其他字符串，子属性就会更新。例如：

<child-component description="The movie title is {{$ctrl.movie.title}}" />

bindings: {
    description: '@', 
}

这里，子范围中的description属性将是表达式"The movie title is {{$ctrl.movie.title}}"的当前值，其中movie是父范围中的对象。

&有点棘手，事实上似乎没有令人信服的理由使用它。它允许您评估父作用域中的表达式，用子作用域中的变量替换参数。一个例子（plunk）：

<child-component 
  foo = "myVar + $ctrl.parentVar + myOtherVar"
</child-component>

angular.module('heroApp').component('childComponent', {
  template: "<div>{{  $ctrl.parentFoo({myVar:5, myOtherVar:'xyz'})  }}</div>",
  bindings: {
    parentFoo: '&foo'
  }
});

鉴于parentVar=10，表达式parentFoo({myVar:5, myOtherVar:'xyz'})将评估为5 + 10 + 'xyz'，该组件将呈现为：

<div>15xyz</div>

你什么时候想要使用这个复杂的功能？人们经常使用&将父作用域中的回调函数传递给子作用域。然而，实际上，使用'{myVar:5, myOtherVar:'xyz'}）可以实现相同的效果。考虑：

使用&回调：

<child-component parent-foo="$ctrl.foo(bar)"/>

angular.module('heroApp').component('childComponent', {
  template: '<button ng-click="$ctrl.parentFoo({bar:'xyz'})">Call foo in parent</button>',
  bindings: {
    parentFoo: '&'
  }
});

使用<回调：

<child-component parent-foo="$ctrl.foo"/>

angular.module('heroApp').component('childComponent', {
  template: '<button ng-click="$ctrl.parentFoo('xyz')">Call foo in parent</button>',
  bindings: {
    parentFoo: '<'
  }
});

请注意，对象（和数组）通过引用传递给子作用域，而不是复制。这意味着即使它是单向绑定，您也在父范围和子范围内使用相同的对象。

要查看不同的前缀，请打开此plunk。

One-time binding(initialization) using ::

[Official docs] 更高版本的AngularJS引入了具有一次性绑定的选项，其中子范围属性仅更新一次。这样可以消除监视父属性的需要，从而提高性能。语法与上述不同;要声明一次性绑定，请在组件标记中的表达式前添加::：

<child-component 
  tagline = "::$ctrl.tagline">
</child-component>

这会将tagline的值传播到子范围，而不会建立单向或双向绑定。注意：如果tagline在父作用域中最初是undefined，则angular将观察它直到它发生更改，然后对子作用域中的相应属性进行一次性更新。

Summary

下表显示了前缀如何工作，具体取决于属性是对象，数组，字符串等。

Answer 7

@和=看到其他答案。

一个关于&的问题 TL; DR; &从父级获取表达式（不仅仅是在其他答案中的示例中的函数），并将其设置为指令中的函数，该函数调用表达式。此函数可以通过传递带变量的对象来替换表达式的任何变量（甚至函数名）。

解释 &是一个表达参考，这意味着如果你传递像<myDirective expr="x==y"></myDirective>这样的东西在指令中，这个expr将是一个函数，它调用表达式，如： function expr(){return x == y}。所以在指令的html中，<button ng-click="expr()"></button>会调用表达式。在指令的js中，$scope.expr()也将调用该表达式。表达式将使用父级的$ scope.x和$ scope.y调用。您可以覆盖参数！如果您通过电话设置，例如<button ng-click="expr({x:5})"></button> 然后使用参数x和parent的参数y调用表达式。你可以覆盖两者。现在你知道了，为什么<button ng-click="functionFromParent({x:5})"></button>工作。因为它只调用父表达式（例如<myDirective functionFromParent="function1(x)"></myDirective>）并用指定的参数替换可能的值，在本例中为x。它可能是： <myDirective functionFromParent="function1(x) + 5"></myDirective> 要么 <myDirective functionFromParent="function1(x) + z"></myDirective> 带小孩电话： <button ng-click="functionFromParent({x:5, z: 4})"></button>。甚至功能替换： <button ng-click="functionFromParent({function1: myfn, x:5, z: 4})"></button>。

它只是一个表达式，如果它是一个函数，或许多函数，或只是比较，无关紧要。并且您可以替换此表达式的任何变量。

例子：指令模板与被调用的代码： parent定义了$ scope.x，$ scope.y：父模板：<myDirective expr="x==y"></myDirective> <button ng-click="expr()"></button>称$scope.x==$scope.y <button ng-click="expr({x: 5})"></button>称5 == $scope.y <button ng-click="expr({x:5, y:6})"></button>称5 == 6

parent定义了$ scope.function1，$ scope.x，$ scope.y：父模板：<myDirective expr="function1(x) + y"></myDirective>

<button ng-click="expr()"></button>称$scope.function1($scope.x) + $scope.y <button ng-click="expr({x: 5})"></button>称$scope.function1(5) + $scope.y <button ng-click="expr({x:5, y:6})"></button>称$scope.function1(5) + 6 指令将$ scope.myFn作为函数： <button ng-click="expr({function1: myFn, x:5, y:6})"></button>称$scope.myFn(5) + 6

Answer 8

为什么我必须将“{{title}}”与“@”和“title”与“=”一起使用？

使用{{title}}时，只有父作用域值将传递给指令视图并进行评估。这仅限于一种方式，这意味着更改不会反映在父范围中。当您想要将子指令中完成的更改反映到父作用域时，可以使用'='。这是双向的。

我是否也可以直接访问父作用域，而无需使用属性装饰我的元素？

当指令中包含scope属性（作用域：{}）时，您将无法再直接访问父作用域。但仍然可以通过范围访问它。$ parent等。如果从指令中删除范围，可以直接访问它。

文档说“通常需要通过表达式将数据从隔离范围传递到父范围”，但这似乎也适用于双向绑定。为什么表达路线会更好？

这取决于具体情况。如果要使用数据调用表达式或函数，可以使用＆，如果需要共享数据，可以使用'='的二进制方式

您可以在以下链接中找到将数据传递给指令的多种方式之间的差异：

AngularJS – Isolated Scopes – @ vs = vs &

http://www.codeforeach.com/angularjs/angularjs-isolated-scopes-vs-vs

Answer 9

@ Attribute string binding（单向）=双向模型绑定和Callback方法绑定

Answer 10

@将本地/指令范围属性绑定到DOM属性的计算值。 =将本地/指令范围属性绑定到父范围属性。＆binding用于将方法传递到指令的作用域中，以便可以在指令中调用它。

@ Attribute string binding =双向模型绑定和Callback方法绑定

Answer 11

这里有很多很棒的答案，但我想提供一些关于@，=和&绑定之间差异的观点，这对我来说非常有用。

所有三种绑定都是通过元素的属性将数据从父作用域传递到指令的独立作用域的方法：

@ binding用于传递字符串。这些字符串支持插值的{{}}表达式。例如：。内插表达式根据指令的父作用域进行评估。

=绑定用于双向模型绑定。父范围中的模型链接到指令的隔离范围中的模型。对一个模型的更改会影响另一个模型，反之亦然。

＆binding用于将方法传递到指令的作用域中，以便可以在指令中调用它。该方法预先绑定到指令的父作用域，并支持参数。例如，如果方法是父作用域中的hello（name），那么为了从指令内部执行方法，必须调用$ scope.hello（{name：'world'}）

我发现通过较短的描述引用范围绑定更容易记住这些差异：

@属性字符串绑定
=双向模型绑定
&回调方法绑定

这些符号还使得范围变量在指令实现中的含义更加清晰：

@字符串
=模型
&方法

为了有用（对我来说反正）：

=
@
&

Answer 12

=表示双向绑定，因此对父作用域的变量的引用。这意味着，当您更改指令中的变量时，它也将在父作用域中更改。

@表示将变量复制（克隆）到指令中。

据我所知，<pane bi-title="{{title}}" title="{{title}}">{{text}}</pane>也应该工作。 bi-title将收到父范围变量值，该值可在指令中更改。

如果需要在父作用域中更改多个变量，则可以在指令中对父作用域执行函数（或通过服务传递数据）。

Answer 13

如果您想通过实例了解更多这方面的工作原理。 http://jsfiddle.net/juanmendez/k6chmnch/

var app = angular.module('app', []);
app.controller("myController", function ($scope) {
    $scope.title = "binding";
});
app.directive("jmFind", function () {
    return {
        replace: true,
        restrict: 'C',
        transclude: true,
        scope: {
            title1: "=",
            title2: "@"
        },
        template: "<div><p>{{title1}} {{title2}}</p></div>"
    };
});

Answer 14

@得到字符串

这不会产生任何绑定。你只是把你传入的单词作为一个字符串

= 2路绑定

从控制器进行的更改将反映在指令持有的引用中，反之亦然

&这个行为有点不同，因为范围得到一个函数，它返回传入的对象。我假设这是必要的，使它工作。小提琴应该清楚这一点。

调用此getter函数后，生成的对象的行为如下：如果函数被传递：那么函数在调用时在父（控制器）闭包中执行如果传入了非函数：只需获取没有绑定的对象的本地副本

This fiddle should demonstrate how they work。特别注意范围函数与名称中的get...希望更好地理解我对&的意思

Answer 15

指令中可以添加三种范围：

父范围：这是默认范围继承。

该指令及其父级（它所在的控制器/指令）范围是相同的。因此，对指令中的范围变量所做的任何更改也会反映在父控制器中。您不需要指定它，因为它是默认值。

子范围：指令创建一个子范围，如果将指令的范围变量指定为true，则该范围将继承父范围。

在这里，如果更改指令内的范围变量，它将不会反映在父范围内，但是如果更改范围变量的属性，则反映在父范围中，因为您实际修改了父范围的范围变量。

例，

app.directive("myDirective", function(){

    return {
        restrict: "EA",
        scope: true,
        link: function(element, scope, attrs){
            scope.somvar = "new value"; //doesnot reflect in the parent scope
            scope.someObj.someProp = "new value"; //reflects as someObj is of parent, we modified that but did not override.
        }
    };
});

隔离范围：当您要创建不从控制器范围继承的范围时，使用此范围。

当您创建插件时会发生这种情况，因为这会使指令变为通用，因为它可以放在任何HTML中，并且不受其父作用域的影响。

现在，如果您不希望与父作用域进行任何交互，则只需将作用域指定为空对象即可。喜欢，

scope: {} //this does not interact with the parent scope in any way

大多数情况并非如此，因为我们需要与父作用域进行一些交互，因此我们希望一些值/更改能够通过。出于这个原因，我们使用：

1. "@"   (  Text binding / one-way binding )
2. "="   ( Direct model binding / two-way binding )
3. "&"   ( Behaviour binding / Method binding  )

@表示来自控制器范围的更改将反映在指令范围中，但如果修改指令范围中的值，则控制器范围变量不会受到影响。

@ always总是希望映射属性是表达式。这个非常重要;因为要使“@”前缀起作用，我们需要将属性值包装在{{}}中。

=是双向的，因此如果更改指令范围中的变量，控制器范围变量也会受到影响

＆用于绑定控制器范围方法，以便在需要时可以从指令中调用它

这里的优点是变量的名称在控制器范围和指令范围内不必相同。

例如，指令范围有一个变量“dirVar”，它与控制器范围的变量“contVar”同步。这为指令提供了很多功能和概括，因为一个控制器可以与变量v1同步，而另一个使用相同指令的控制器可以要求dirVar与变量v2同步。

以下是用法示例：

指令和控制器是：

 var app = angular.module("app", []);
 app.controller("MainCtrl", function( $scope ){
    $scope.name = "Harry";
    $scope.color = "#333333";
    $scope.reverseName = function(){
     $scope.name = $scope.name.split("").reverse().join("");
    };
    $scope.randomColor = function(){
        $scope.color = '#'+Math.floor(Math.random()*16777215).toString(16);
    };
});
app.directive("myDirective", function(){
    return {
        restrict: "EA",
        scope: {
            name: "@",
            color: "=",
            reverse: "&"
        },
        link: function(element, scope, attrs){
           //do something like
           $scope.reverse(); 
          //calling the controllers function
        }
    };
});

和html（注意@和=的区别）：

<div my-directive
  class="directive"
  name="{{name}}"
  reverse="reverseName()"
  color="color" >
</div>

这是博客的link，很好地描述了它。

Answer 16

我们可以使用： -

@： - 用于单向数据绑定的字符串值。在某种程度上数据绑定，您只能将范围值传递给指令
=： - 用于双向数据绑定的对象值。在双向数据绑定中，您可以更改指令中的范围值以及html中的范围值。
＆： - 用于方法和功能。

编辑

在Angular 1.5及以上版本的组件定义中有四种不同类型的绑定：

=双向数据绑定： - 如果我们更改值，它会自动更新
<单向绑定： - 当我们只想从父作用域读取参数而不更新它时。
@这是用于字符串参数
&这是用于回调，以防你的组件需要输出一些东西到它的父范围

Answer 17

我创建了一个包含Angular代码的HTML文件，演示了它们之间的差异：

<!DOCTYPE html>
<html>
  <head>
    <title>Angular</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  </head>
  <body ng-app="myApp">
    <div ng-controller="myCtrl as VM">
      <a my-dir
        attr1="VM.sayHi('Juan')" <!-- scope: "=" -->
        attr2="VM.sayHi('Juan')" <!-- scope: "@" -->
        attr3="VM.sayHi('Juan')" <!-- scope: "&" -->
      ></a>
    </div>
    <script>
    angular.module("myApp", [])
    .controller("myCtrl", [function(){
      var vm = this;
      vm.sayHi = function(name){
        return ("Hey there, " + name);
      }
    }])
    .directive("myDir", [function(){
      return {
        scope: {
          attr1: "=",
          attr2: "@",
          attr3: "&"
        },
        link: function(scope){
          console.log(scope.attr1);   // =, logs "Hey there, Juan"
          console.log(scope.attr2);   // @, logs "VM.sayHi('Juan')"
          console.log(scope.attr3);   // &, logs "function (a){return h(c,a)}"
          console.log(scope.attr3()); // &, logs "Hey there, Juan"
        }
      }
    }]);
    </script>
  </body>
</html>

Answer 18

= way是双向绑定，它允许您在指令中进行实时更改。当某人将该变量更改为指令时，您将在指令中更改数据，但@ way不是双向绑定。它像Text一样工作。你绑定一次，你将只有它的价值。

为了更清楚地了解它，你可以使用这篇伟大的文章：

AngularJS Directive Scope '@' and '='

AngularJS中指令范围内的'@'和'='有什么区别？

问题描述投票：1040回答：18

18个回答

Summary

编辑

最新问题

AngularJS中指令范围内的'@'和'='有什么区别？

问题描述 投票：1040回答：18

18个回答

Summary

编辑

最新问题

问题描述投票：1040回答：18