我对AngularJS很陌生。谁能给我解释一下AngularJS的这些操作符:&,@和=在隔离作用域时的区别。
当前回答
我花了很长时间才真正掌握了这个。对我来说,关键是理解“@”是你想在原地求值的东西,并作为常量传递到指令中,而“=”实际上传递的是对象本身。
有一篇很好的博客文章解释了这一点:http://blog.ramses.io/technical/AngularJS-the-difference-between-@-&-and-=-when- declarations -directive -using- isolation -scopes
其他回答
我花了很长时间才真正掌握了这个。对我来说,关键是理解“@”是你想在原地求值的东西,并作为常量传递到指令中,而“=”实际上传递的是对象本身。
有一篇很好的博客文章解释了这一点:http://blog.ramses.io/technical/AngularJS-the-difference-between-@-&-and-=-when- declarations -directive -using- isolation -scopes
@ allows a value defined on the directive attribute to be passed to the directive's isolate scope. The value could be a simple string value (myattr="hello") or it could be an AngularJS interpolated string with embedded expressions (myattr="my_{{helloText}}"). Think of it as "one-way" communication from the parent scope into the child directive. John Lindquist has a series of short screencasts explaining each of these. Screencast on @ is here: https://egghead.io/lessons/angularjs-isolate-scope-attribute-binding
&允许指令的隔离作用域将值传递到父作用域,以便在属性中定义的表达式中求值。注意,指令属性是隐式的表达式,不使用双花括号表达式语法。这一点很难用文字来解释。&的截屏在这里:https://egghead.io/lessons/angularjs-isolate-scope-expression-binding
=在指令的隔离作用域和父作用域之间建立一个双向绑定表达式。子范围中的更改会传播到父范围,反之亦然。把=看成@和&的组合。=上的截屏在这里:https://egghead.io/lessons/angularjs-isolate-scope-two-way-binding
最后,这里有一个截屏,显示这三个在一个视图中一起使用:https://egghead.io/lessons/angularjs-isolate-scope-review
不是我的小提琴,但http://jsfiddle.net/maxisam/QrCXh/显示了差异。关键是:
scope:{
/* NOTE: Normally I would set my attributes and bindings
to be the same name but I wanted to delineate between
parent and isolated scope. */
isolatedAttributeFoo:'@attributeFoo',
isolatedBindingFoo:'=bindingFoo',
isolatedExpressionFoo:'&'
}
@:单向绑定
=:双向绑定
&:函数绑定
AngularJS -隔离作用域- @ vs = vs &
简短的例子和解释可在以下链接:
http://www.codeforeach.com/angularjs/angularjs-isolated-scopes-vs-vs
@ -单向绑定
在指令:
scope : { nameValue : "@name" }
在视图:
<my-widget name="{{nameFromParentScope}}"></my-widget>
= -双向绑定
在指令:
scope : { nameValue : "=name" },
link : function(scope) {
scope.name = "Changing the value here will get reflected in parent scope value";
}
在视图:
<my-widget name="{{nameFromParentScope}}"></my-widget>
& -函数调用
在指示中:
scope : { nameChange : "&" }
link : function(scope) {
scope.nameChange({newName:"NameFromIsolaltedScope"});
}
在视图:
<my-widget nameChange="onNameChange(newName)"></my-widget>
推荐文章
- 窗口。亲近与自我。close不关闭Chrome中的窗口
- 同步和异步编程(在node.js中)的区别是什么?
- 在d3.js中调整窗口大小时调整svg的大小
- angular.js中的内联条件
- 如何将两个字符串相加,就好像它们是数字一样?
- 绑定多个事件到一个监听器(没有JQuery)?
- 在JavaScript中将JSON字符串解析为特定对象原型
- 将字符串“true”/“false”转换为布尔值
- 如何使用JavaScript代码获得浏览器宽度?
- event.preventDefault()函数在IE中无法工作
- indexOf()和search()的区别是什么?
- 错误:'types'只能在.ts文件中使用- Visual Studio Code使用@ts-check
- React-Native:应用程序未注册错误
- LoDash:从对象属性数组中获取值数组
- src和dist文件夹的作用是什么?