我已经仔细阅读了AngularJS关于这个主题的文档,然后摆弄了一个指令。这是小提琴。

以下是一些相关片段:

来自HTML: <窗格bi-title = "标题" title =“{{标题}}>{{文本}}> < /窗格 从窗格指令: scope: {biTitle: '=', title: '@', bar: '='},

有几件事我不明白:

为什么我必须使用“{{title}}”与“@”和“title”与“=”? 我也可以直接访问父范围,而不装饰我的元素与属性? 文档说:“通常情况下,通过表达式将数据从孤立的作用域传递到父作用域是可取的”,但这似乎也适用于双向绑定。为什么表达式路由会更好呢?

我发现另一个小提琴,显示表达式解决方案太:http://jsfiddle.net/maxisam/QrCXh/


当前回答

我们可以简单地使用:-

@:-用于单向数据绑定的字符串值。在一种方式中,数据绑定只能将作用域值传递给指令 =:- for对象值用于双向数据绑定。数据绑定有两种方式,你可以在指令和HTML中改变作用域值。 &:-用于方法和函数。

EDIT

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

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

其他回答

为什么我必须使用“{{title}}”与“@”和“title”与“=”?

当你使用{{title}}时,只有父范围值将被传递给指令视图并计算。这仅限于一种方式,这意味着更改不会反映在父范围中。当你想要将在子指令中所做的更改反映到父作用域时,你也可以使用'='。这是双向的。

我也可以直接访问父范围,而不装饰我 元素的属性?

当指令中有scope属性(scope:{})时,你将不能再直接访问父作用域。但是仍然可以通过作用域访问它。美元的父母等等。如果从指令中删除作用域,则可以直接访问它。

文档中说:“通常需要从 隔离作用域通过表达式和父作用域”,但是 似乎工作与双向绑定也很好。为什么 表达路线更好吗?

这取决于上下文。如果你想调用带有数据的表达式或函数,你可以使用&,如果你想共享数据,你可以使用双向的方式使用'='

你可以在下面的链接中找到传递数据到指令的多种方式之间的差异:

AngularJS -隔离作用域- @ vs = vs &

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

为什么我必须使用“{{title}}”与“@”和“title”与“=”?

@ binds a local/directive scope property to the evaluated value of the DOM attribute. If you use title=title1 or title="title1", the value of DOM attribute "title" is simply the string title1. If you use title="{{title}}", the value of the DOM attribute "title" is the interpolated value of {{title}}, hence the string will be whatever parent scope property "title" is currently set to. Since attribute values are always strings, you will always end up with a string value for this property in the directive's scope when using @.

=将局部/指令作用域属性绑定到父作用域属性。因此,使用=,您使用父模型/作用域属性名作为DOM属性的值。{{}}不能与=一起使用。

使用@,你可以这样做title="{{title}},然后some"——{{title}}被插入,然后字符串"and them some"与它连接。最后一个串接的字符串是local/directive scope属性得到的。(你不能用=,只能用@。)

对于@,您将需要使用attr。$observe('title',函数(值){…})如果你需要在你的link(ing)函数中使用该值。例如,如果范围。Title == "…")不会像你期望的那样工作。注意,这意味着您只能异步访问该属性。 如果只使用模板中的值,则不需要使用$observe()。例如,模板:'<div>{{title}}</div>'。

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

我也可以直接访问父范围,而不装饰我的元素与属性?

是的,但前提是你不使用孤立的作用域。从指令中删除这一行

范围:{…}

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

文档中说:“通常情况下,通过表达式将数据从孤立的作用域传递到父作用域是可取的”,但这似乎也适用于双向绑定。为什么表达式路由会更好呢?

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

另请参阅

Lukas的孤立范围博客文章(涵盖@,=,&) Dnc253对@和=的解释 我关于作用域的博客般的回答——指令部分(在底部,就在摘要部分之前)有一个孤立作用域和它的父作用域的图片——指令作用域使用@表示一个属性,使用=表示另一个属性 在angularJS中& vs @和=的区别是什么

=表示双向绑定,即父作用域的变量引用。这意味着,当你在指令中改变变量时,它也会在父作用域中被改变。

@意味着变量将被复制(克隆)到指令中。

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

如果你需要改变父作用域中的几个变量,你可以在指令内执行父作用域中的函数(或者通过服务传递数据)。

这个问题已经被折腾得够呛了,但我还是要分享一下,以防其他人也在纠结AngularJS作用域这个可怕的烂摊子。包括=,<,@,&和::。完整的报道可以在这里找到。


=建立双向绑定。更改父对象中的属性将导致子对象中的更改,反之亦然。


<建立单向绑定,父到子。更改父属性将导致子属性的更改,但更改子属性不会影响父属性。


@会将tag属性的字符串值赋给子属性。如果属性包含表达式,则每当表达式计算为不同的字符串时,子属性就会更新。例如:

<child-component description="The movie title is {{$ctrl.movie.title}}" />
bindings: {
    description: '@', 
}

在这里,子作用域中的description属性将是表达式“the movie title is {{$ctrl.movie.”的当前值。Title}}",其中movie是父作用域中的对象。


&有点棘手,事实上似乎没有令人信服的理由去使用它。它允许您在父范围内计算表达式,用子范围内的变量替换参数。一个例子(砰):

<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: '<'
  }
});

注意,对象(和数组)是通过引用传递给子作用域的,而不是复制。这意味着即使它是单向绑定,您也在父作用域和子作用域中使用相同的对象。


要查看不同前缀的作用,请打开这个插件。

One-time binding(initialization) using ::

(官方文档) AngularJS的后续版本引入了一次性绑定的选项,其中子作用域属性只更新一次。这样就不需要监视父属性,从而提高了性能。语法与上面不同;要声明一个一次性绑定,在组件标记的表达式前面添加::::::

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

这将把tagline的值传播到子作用域,而不需要建立单向或双向绑定。注意:如果tagline最初在父作用域中未定义,angular会监视它,直到它发生变化,然后对子作用域中相应的属性进行一次性更新。

总结

下表显示了前缀是如何工作的,这取决于属性是对象、数组、字符串等。

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

在需要在外部作用域和指令的隔离作用域之间创建双向绑定的情况下,可以使用=字符。

& local作用域属性允许指令的使用者传入指令可以调用的函数。

请查看下面的链接,它会用例子让你清楚地理解。我发现它真的很有用,所以想分享它。

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