Augluar 自定义指令中， scope配置中的@、=和&修饰符有什么区别？
参考回答
在AngularJS自定义指令中，scope配置用于隔离作用域，定义与父作用域的数据绑定方式。其中，@、=和&是三种常用的修饰符，它们的作用如下：
@(字符串绑定)
将父作用域中的表达式解析为字符串，并传递到指令的隔离作用域中。
示例：<my-directive title="parentTitle"></my-directive>scope: { title: '@' }=(双向绑定)
将父作用域中的变量和指令隔离作用域中的变量双向绑定。
示例：<my-directive user="currentUser"></my-directive>scope: { user: '=' }&(函数绑定)
用于将父作用域中的方法传递到指令隔离作用域中，允许指令调用父作用域的方法。
示例：<my-directive on-click="handleClick()"></my-directive>scope: { onClick: '&' }
详细讲解与拓展
1. @ (字符串绑定)
@适合用于传递静态值或简单的父作用域表达式，最终会转换为字符串。
– 传递静态值：
“`html
<my-directive title="Hello"></my-directive>
“`
无需解析，直接将`”Hello”`传递给指令的`scope.title`。
- 传递动态表达式：
<my-directive title="{{parentTitle}}"></my-directive>如果`parentTitle`是`”Welcome”`，最终传递给`scope.title`的值为`”Welcome”`。
示例代码：
app.directive('myDirective', function() {
return {
restrict: 'E',
scope: {
title: '@'
},
template: '<p>{{title}}</p>'
};
});
2. = (双向绑定)
=适合用来绑定对象或变量，指令作用域中的更改会影响父作用域中的值，反之亦然。
- 双向绑定机制：
<my-directive user="currentUser"></my-directive>如果`currentUser`是父作用域中的一个对象，指令内部对`scope.user`的修改会直接影响`currentUser`。
示例代码：
app.directive('myDirective', function() {
return {
restrict: 'E',
scope: {
user: '='
},
template: '<input ng-model="user.name">'
};
});
使用：
<div ng-controller="MainCtrl">
<my-directive user="currentUser"></my-directive>
</div>
父作用域currentUser的name会随着指令内部的输入框变化而更新。
3. & (函数绑定)
&用于将父作用域的方法绑定到指令中，以便在指令内部调用这些方法。
- 绑定父作用域的方法：
<my-directive on-click="handleClick()"></my-directive>当指令内部触发时，会调用父作用域的`handleClick`方法。
示例代码：
app.directive('myDirective', function() {
return {
restrict: 'E',
scope: {
onClick: '&'
},
template: '<button ng-click="onClick()">Click Me</button>'
};
});
使用：
<div ng-controller="MainCtrl">
<my-directive on-click="showMessage()"></my-directive>
</div>
当按钮点击时，父作用域中的showMessage函数会被调用。
使用场景与对比
| 修饰符 | 使用场景 | 数据传递方向 | 示例 |
|---|---|---|---|
@ |
静态值或字符串表达式 | 父作用域 → 指令 | <my-directive title="Hello"> |
= |
需要双向绑定的变量 | 父作用域 ↔ 指令 | <my-directive user="userObj"> |
& |
需要调用父作用域的方法 | 指令 → 父作用域 | <my-directive on-click="fn()"> |
常见错误与注意事项
=双向绑定类型不匹配
如果=绑定的不是对象或变量，而是一个字符串或常量，会导致绑定失败。<!-- 错误示例 --> <my-directive user="'John'"></my-directive> <!-- 引号包裹常量 -->修正：确保绑定的值是一个变量。
-
@表达式未正确解析
使用@时，如果忘记使用{{}}，则会直接传递未解析的表达式。 -
函数绑定的参数传递
使用&时，可以通过&传递参数给父作用域函数：<my-directive on-click="doSomething(value)"></my-directive>在指令内部调用时：
scope.onClick({ value: 42 });
总结
@、=和&是AngularJS自定义指令中用于隔离作用域的重要工具，分别用于字符串绑定、双向绑定和函数绑定。在实际开发中，合理选择修饰符可以使指令更加模块化和灵活。通过理解它们的使用场景和数据流方向，能够避免常见错误，并提升代码质量。